CSS -beeldreflectie

In dit hoofdstuk leer je hoe je een afbeelding weerkaatst.

CSS-afbeeldingsreflecties

De box-reflecteigenschap wordt gebruikt om een beeldreflectie te creëren.

De waarde van de box-reflecteigenschap kan zijn: below, above, left, of right.

De getallen in de tabel geven de eerste browserversie aan die de eigenschap volledig ondersteunt.

Getallen gevolgd door -webkit- specificeren de eerste versie die met een prefix werkte.

Property
box-reflect	4.0 -webkit-	79.0 -webkit-	Not supported	4.0 -webkit-	15.0 -webkit-

Hier willen we de reflectie onder de afbeelding:

img {
-webkit-box-reflect: below;
}

Hier willen we de reflectie rechts van de afbeelding:

img {
-webkit-box-reflect: right;
}

Als u de opening tussen de afbeelding en de reflectie wilt specificeren, voegt u de grootte van de opening toe aan de box-reflecteigenschap.

Hier willen we de reflectie onder de afbeelding, met een offset van 20px:

img {
-webkit-box-reflect: below 20px;
}

We kunnen ook een fade-out effect creëren op de reflectie.

Creëer een fade-out effect op de reflectie:

img {
-webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));
}