Un effet de reflet ou de miroir en CSS3 avec Webkit

Avec le CSS3, nous pouvons réaliser assez facilement des effets de reflet à nos images dans tous les navigateurs basés sur la technologie Wekbit. Avec de simples lignes de CSS, donner du glamour à vos images en utilisant simplement la propriété -webkit-box-reflect. Dans cet article, je vais vous expliquer comment cette propriété pour les images et le textes.

Présentation

Avec le CSS3, nous pouvons réaliser assez facilement des effets de reflet à nos images dans tous les navigateurs basés sur la technologie Wekbit.

Avec de simples lignes de CSS, donner du glamour à vos images en ajoutant un reflet.

Pas besoin d’image, ni de Photoshop, il suffit simplement d’utiliser la propriété -webkit-box-reflect pour sublimer vos images.

Voyons comment utiliser cette propriété pour les images et le texte.

La propriété -webkit-box-reflect en CSS3

La syntaxe :

 webkit-box-reflect: ;

Toutes ces propriétés se mettent à la suite les unes des autres. On notera que cette propriété est préfixée pour webkit. En effet, webkit est le seul moteur de rendu à gérer les reflets de boite.

Les valeurs :

Les valeurs de la propriété -webkit-gradient sont modifiables à souhaites.

Le décalage est exprimé en pixels (px) et indique le décalage entre l’objet et son image réfléchie. Une valeur négative est possible.

 La direction qui peut adopter les propriétés suivantes :

 above : au-dessus. Le reflet apparait au-dessus de l’image.

 below : en dessous. Le reflet apparait au-dessous de l’image.

 left : à gauche. Le reflet apparait à gauche de l’image.

 right : à droite. 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 de l’exemple de syntaxe. La valeur par défaut est 0.

 Le masque est un dégradé de transparent vers noir ou blanc, il représente le masque du reflet. IL est utilisé pour recouvrir le reflet. Si cette dernière valeur est omise, le reflet n’aura tout simplement pas de masque.

Afin de créer cette apparence de ce reflet, nous utiliserons un dégradé grâce à la propriété CSS3 -webkit-gradient.

En pratique

Exemple un reflet glamour sur vos images

Le Code HTLM :

Le code CSS3 :

img

 webkit-box-reflect:
below 0

 webkit-gradient(linear,0 0,0 100%,
from(transparent),color-stop(.6,transparent),
to(rgba(255, 255, 255, 0.3)));

Exemple :

Exemple avec un reflet sur le texte

Vous pouvez également appliquer un reflet à vos textes, de la même manière que pour vos images.

Code HTML:

Un reflet en CSS3

Style CSS à appliquer :

p
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size :40px;
font-weight:blod;
color:#333;

 webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), to(white));

Contraintes

Notez tout de même une contrainte, cette astuce ne fonctionne qu’avec les navigateurs Webkit, c’est à dire Google Chrome et Safari ;elle ne fonctionne pas avec Opéra, Firefox ou IE.

Avec ces techniques donnez du style à vos images, facilement en peu de temps !

Téléchargez l’archive et décompressez le dossier zip, tout le code est là.
Webkit Box Reflect