Réflexion d'image CSS
Dans ce chapitre, vous apprendrez à refléter une image.
Réflexions d'images CSS
La box-reflectpropriété est utilisée pour créer une réflexion d'image.
La valeur de la box-reflectpropriété peut être : below, above,
leftou right.
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la propriété.
Les nombres suivis de -webkit- spécifient la première version qui a fonctionné avec un préfixe.
| Property | |||||
|---|---|---|---|---|---|
| box-reflect | 4.0 -webkit- | 79.0 -webkit- | Not supported | 4.0 -webkit- | 15.0 -webkit- |
Exemples
Exemple
Ici on veut le reflet sous l'image :
img {
-webkit-box-reflect: below;
}
Exemple
Ici on veut le reflet à droite de l'image :
img {
-webkit-box-reflect: right;
}
Décalage de réflexion CSS
Pour spécifier l'écart entre l'image et la réflexion, ajoutez la taille de l'écart à la box-reflectpropriété.
Exemple
Ici, nous voulons la réflexion sous l'image, avec un décalage de 20px :
img {
-webkit-box-reflect: below 20px;
}
Réflexion CSS avec dégradé
Nous pouvons également créer un effet de fondu sur la réflexion.
Exemple
Créez un effet de fondu sur le reflet :
img {
-webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0.0),
rgba(0,0,0,0.4));
}