Avec le CSS3, nous pouvons réaliser assez facilement des effets de reflet à nos images dans tous les navigateurs basés sur la technologie Webkit (Safari, Chrome …en savoir plus sur les navigateurs webkit) – qui représentent environ 20% des navigateur. La solution vient dans la propriété spécifique , -webkit-box-reflect. Je vais vous montrer comment l’utiliser dans ce court tutoriel.
Le résultat souhaité (si votre navigateur est compatible …)
La propriété -webkit-box-reflect en CSS3
La syntaxe :
1 | -webkit-box-reflect: <direction> <offset> <mask-box-image>; |
Les valeurs
Commencez par renseigner les indications de l’élément <direction> de l’exemple de syntaxe ci-dessus.
- above : Le reflet apparait au-dessus de l’image
below : Le reflet apparait au-dessous de l’image
left : Le reflet apparait à gauche de l’image
right : Le reflet apparait à droite de l’image
La distance – ou marge – du reflet à partir du bord de l’image s’exprime en unités de longueur ou en pourcentage. Renseigner les indications de l’élément <offset> de l’exemple de syntaxe. La valeur par défaut est 0.
La dernière valeur à indiquer reprensente le masque du reflet. IL est Utilisé pour recouvrir le reflet. Si cette valeur est omise, le reflet n’aura pas de masque. Afin de créer l’apparence de ce reflet, nous utiliserons un Dégradé grâce à la propriété CSS3 -webkit-gradient.
La valeur de l’élément <mask-box-image>, pour notre exemple, sera la suivante :
1 | -webkit-gradient(linear, 0 0%, 0 100%, from(transparent), color-stop(0.7, transparent), to(white)) |
Vous pouvez changer les valeurs de la propriété -webkit-gradient comme bon vous semble. Dans notre exemple, nous souhaitons réaliser un reflet, le masque de l’image est en dégradé pour faire disparaitre cette image en la rendant transparente. Maintenant, c’est à vous de réaliser vos propres styles !
Le code CSS3 complet pour un effet reflet
1 2 3 | img { -webkit-box-reflect: below 1px -webkit-gradient(linear, 0 0%, 0 100%, from(transparent), color-stop(0.7, transparent), to(white)); } |
Un problème, une suggestion ou une remarque : Poser votre question ou venez en discuter sur notre forum.
