Démos

Toutes les démos

<>

Couverture du livre CSS3 Le design web moderne

Livre CSS3

Le design web moderne

Plus d'infos sur le site officiel

En vente sur Amazon, FNAC, Dunod

Suivre

Actualités du site CSS3Create

Actualités sur CSS et le web en général

Hover avec transitions

Réaliser un effet de hover progressif avec les transitions en CSS3

Création: décembre 2010Modifié:

Contenu
Full CSS Pas de JavaScript Pas d’images
Navigateurs
Firefox Safari Chrome Opera Internet Explorer
Partagez
Facebook Twitter

Votez

115 votes4.56

Utilisation des Transitions CSS pour effectuer des effets de fondu sur un hover dans un menu. Le tout en Full CSS3.

Cré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.

Envie d'une nouvelle démo?

Un p'tit mot...

#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


modération à priori

Ce forum est modéré à priori : votre contribution n'apparaîtra qu'après avoir été validée par un administrateur du site.

Un message, un commentaire ?
    Qui êtes-vous ? (optionnel)
  • (Pour créer des paragraphes, laissez simplement des lignes vides.)