Termes CSS clés employés : radial-gradient, transition, background-position.
Compatibilité navigateurs : IE10+, Firefox16+, Chrome26+, Safari avec préfixe, Opera12.1+.
Créer un aspect de reflet en mouvement sur un titre ou un quelconque élément, lors du survol de celui-ci.
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…
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;
}
Brillant, n'est-ce pas ?
|
---|