Chapitre 2
Interface et menus
Retour Accueil CSS
22 Une touche de brillance (II)
Termes CSS clés employés : linear-gradient, animation, border-radius, text-shadow.
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. Soyons honnête, si la solution précédente fonctionne elle reste imparfaite : il serait mieux de ne visualiser le reflet que sur le texte et non sur le fond de l’élément conteneur.
Résolution théorique
Plusieurs méthodes pourraient théoriquement permettre de parvenir à ce résultat :
- La propriété CSS3 mask. Hélas, ce module est encore au stade de brouillon de travail et cette propriété n’est reconnue que dans le moteur Webkit (Chrome, Safari, iOS, Android), avec son préfixe dédié.
- La propriété SVG mask sur du contenu HTML, applicable à tout navigateur reconnaissant SVG, comme Firefox. Mais cette solution n’est donc pas non plus universelle.
Résolution pratique
Le code HTML est identique au précédent, si ce n’est que le DIV reflet est superflu :
<DIV class=conteneur>
<P class=contenu>Brillant, n'est-ce pas ?</P>
</DIV>
On définit simplement dans le code CSS une animation de 60 centièmes de seconde en cas de survol de l’élément P contenu :
P.contenu:hover { animation: brillance .6s linear;}
@keyframes brillance {
from {color : grey;
text-shadow: 3px 3px 3px black;}
50% {color:white;
text-shadow: 3px 3px 3px grey;}
to {color : grey;
text-shadow: 3px 3px 3px black;}
}
Brillance (II)
Brillant, n'est-ce pas ?
L’effet est différent : pas de « trait de lumière » qui passe sur le conteneur, tout s’illumine simultanément. Mais, comme dit plus haut, la seule façon de résoudre totalement le problème serait de recourir à des images.
Retour Accueil CSS
|
|
|---|