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(#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é violet. 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;
}Obtenez plus d’infos sur l’utilisation des dégradés.
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 2012
J’ai le même problème que Blabla.. :\
#8par Taz, le 4 juin 2012
C’est pas l’envie qui manque mais comme les deux personnes précédentes je n’y arrive pas.
#9par jiremek, le 15 juin 2012
C’est dommage, mais les transitions ne fonctionnent pas et le padding n’a aucun effet.
#10par groupi, le 28 juin 2012
Effectivement, le dégradé n’est pas assez bien expliquer . Moi ça ne marche pas :’(
#11par mer1 ch’, le 13 juillet 2012
bon astuce, faut juste ajouter les prefixe ’-moz-’ et ’-webkit-’ pour nos amis les copieurs / colleurs :-D
#12par mer1 ch’, le 13 juillet 2012
un extrait simple :
#mon_lien
color : skyblue ;
transition : color 1s ;
-moz-transition : color s ;
-webkit-transition : color 1s ;
#mon_lien:hover
color : black ;
transition : color 0.3s ;
-moz-transition : color 0.3s ;
-webkit-transition : color 0.3s ;
#13par css3create, le 13 juillet 2012
@mer1 ch’ : Oui mais il faut penser aussi à
-ms-et-o-. Plus d’infos sur l’utilisation des transitions CSS aujourd’hui.#14par Karmendra, le 5 septembre 2012
Hi buddy, that’s a really cool tutorail. But where can i find the code source ?
Thanks
#15par adrien, le 5 décembre 2012
Génial tutoriel,
j’ai juste un problème sous firefox, pas moyen de voir les transitions fonctionner. Et c’est pas faute d’avoir essayer des dizaines de trucs ! J’vois vraiment pas d’où ça peut venir !?
#16par niwan, le 21 juin 2013
très intéressant. Ce qu’il faut savoir, c’est que le tag A, avec un Background en dégradé, ben ça marche pas ; il faut un dégradé uni !
Je comprenais pas pourquoi ça marchait pas...
je vais regarder encore un peu ce site... :-)
#17par NoNo282, le 9 juillet 2013
Pour ceux qui avait le problème : il me met un fond gris en arrière plan de mon texte !
Il faut utiliser ça :
a
display : block
et après vos liens se comporteront comme des blocks, on peut donc modifier les dimensions.
#18par Golden Specter, le 10 août 2013
Merci beaucoup. Je ne savais pas comment donner l’impression de faire une animation qui apparaît et "disparaît" lorsque l’élément n’est plus sélectionné par la souris :D