41Mag - Appliquer un effet de reflet à une image en CSS3 – webkit-box-reflect

Appliquer un effet de reflet à une image en CSS3 – webkit-box-reflect

Avec le CSS3nous 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 …)

reflet

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));
}

Article du même thême : ..

  • http://www.techtoolgeek.com Franck Melka

    Je viens de découvrir votre site, je l’ai mis dans mes favoris.

    C’est clair et pour une fois, c’est expliqué et les exemples sont concrés.

    Beau travail.

Copyright © 2013 | 41Mag. All rights reserved. Contact.
Integrated by Créa-troyes. Powered by WordPress.