Chapitre 2
Interface et menus

Retour Accueil CSS

21 Une touche de brillance…

Termes CSS clés employés : radial-gradient, transition, background-position.
Compatibilité navigateurs : IE10+, Firefox16+, Chrome26+, Safari avec préfixe, Opera12.1+.

Problématique

Créer un aspect de reflet en mouvement sur un titre ou un quelconque élément, lors du survol de celui-ci.

Résolution théorique

L’astuce consiste à créer un élément conteneur qui renfermera un élément transparent exactement superposé, auquel sera appliqué un effet de transition à l’aide d’un dégradé radial. Et puisqu’il est dit survol, il va y avoir du :hover…

Résolution pratique

Le code HTML est composé d’un élément DIV conteneur qui renferme un élément contenu (quelconque, mais ici un élément P avec du texte) suivi d’un élément DIV.
<DIV class=conteneur> <P id=contenu>Brillant, n’est-ce pas ?</P> <DIV class=reflet></DIV> </DIV>
Le code CSS commence par définir les propriétés du conteneur :
DIV.conteneur { margin : 20px auto 20px ; width : 300px ; }
Nous définissons ensuite les caractéristiques de l’élément du contenu :
P.contenu { width : 100% ; text-shadows : color : grey font-weight : bolder ; }
Et enfin le plus subtil, l’élément DIV reflet avec sa transition :
DIV.reflet {position :absolute ; display:none ; top : 0px left : 0px ; background: radial-gradient(0 0, rgba(255,255,255,0) 90%, rgba(255,255,255,.8) 98%, rgba(255,255,255,0) 100% ) no-repeat; background-position: -140px 0; } DIV.reflet:hover, DIV.reflet:focus { display:block; transition: background-position 1s; background-position: 10px 0; }

Brillance

Brillant, n'est-ce pas ?


Retour Accueil CSS

© 1999-2014 Fabrice "Fyndhorn Elder" Lemainque
Get Firefox!