Souscrire
Blog iamvdo.meCréation d’un hover progressif
Un hover progressif ? Je n’ai pas trouvé mieux pour expliquer cet effet pourtant si simple.
Plutôt que de gérer un hover ON/OFF, ici le hover s’applique progressivement, plus précisément, il disparait progressivement. On peut aussi parler de hover temporisé.
De plus, l’effet de transition progressive est appliqué sur un dégradé. Pour réaliser cela, on applique tout d’abord un dégradé sur chaque élément de liste <li>.
ul li{
background:linear-gradient(top, #90C, #8600B3);
}Puis, sur chaque lien est appliqué un fond de couleur (gris) et lors du hover, on fait disparaitre ce fond avec les transitions. Tout d’abord en 0 secondes, ce qui provoque l’apparition du dégradé. Puis on le fait réapparaître en 0,5 secondes. On a donc l’impression de voir disparaitre le dégradé.
ul li a{
background:#666;
transition:background 0.5s;
}
ul li a:hover{
background:transparent;
transition:background 0s;
}Les coins arrondis
Dans cette démo, j’utilise également border-radius avec les pseudo-classes :first-child et :last-child pour arrondir le coin supérieur droit du premier <li> et le coin inférieur droit du dernier <li>.
ul li:first-child{
border-radius:0px 20px 0px 0px;
}
ul li:last-child{
border-radius:0px 0px 20px 0px;
}Pour la création de la petite flèche, suivez le tutoriel d’utilisation des bordures
Astuce : utilisez prefixMyCSS pour ajouter les préfixes propriétaires aux règles CSS3.
#1par Oliver, le 20 février 2011
Dommage que les effets de transitions ne fonctionnent pas avec FF 3.6 ! :)
#2par css3create, le 20 février 2011
Oui, c’est vrai !
Mais les transitions marchent très bien avec Firefox 4. Donc patience... Bientôt, FF 3.6 ne sera plus qu’un lointain souvenir.
#3par benj, le 19 mars 2011
hey,
je pense que dans ta derniere explication, sur les last child et first child
tu t’as gouré, hé !
ce sont les deux coins droits, (sup. et inf.)
pour les border-radius, non ?
adios
#4par css3create, le 19 mars 2011
Bien vu benj !
C’est corrigé.
#5par z, le 6 juin 2011
sympa, mais pas assez d’explications...
#6par Blabla, le 21 décembre 2011
pas assez détaillé comme tuto
je galère à mort....
il me met un fond gris en arrière plan de mon texte !
#7par paskiller, le 22 février
J’ai le même problème que Blabla.. :\