Souscrire
Blog iamvdo.meDans cette démo, on utilise une liste à puce avec des liens. Tout d’abord, on applique un dégradé sur le <ul>, en utilisant la syntaxe propriétaire.
ul{
/* Fallback si dégradé non dispo*/
background:#D62300;
/* Firefox */
background:-moz-linear-gradient(top,#F65E01,#D62300);
/* Chrome, Safari */
background:-webkit-gradient(linear, left top, left bottom, from(#F65E01), to(#D62300));
}Au survol, le dégradé est composé de plusieurs étapes : de #222 vers #222 en passant par #555 entre 5% et 95%. Voici les différentes syntaxes, en fonction des navigateurs.
ul li:hover{
background:#444444;
background:-moz-linear-gradient(right,#222,#555 5%,#555 95%,#222 100%);
background:-webkit-gradient(linear,right top,left top,from(#222),to(#222),color-stop(0.05, #555),color-stop(0.95, #555));
}Pour mieux comprendre, voir comment utiliser les dégradés
#1par cool, le 6 mai 2011
cool merci
#2par Boyz, le 17 septembre 2011
Salut, j’ai copié ce tuto entier dans ma feuille css et lorsque je fait mon menu dans ma feuille html avec les li, ul et a pour les liens, ça me fait un menu horizontal :( Quelqu’un pourrait m’éclairer ?
#3par moioli888, le 11 novembre 2011
met display:inline ; dans tes <*li> (sans le * bien entendu ;) )
#4par Shiro, le 28 décembre 2011
Bonjour, tout dabord merci pour le tuto =)
Par contre je n’arrive pas à faire la séparation que tu as fait ... Quelqu’un pourrait m’aider ? ^^
#5par magicalex, le 8 avril
ça fonctionne aussi sous opéra.
ul
background : -o-linear-gradient(top,#F65E01,#D62300) ;
ul li:hover
background :#444444 ;
background : -o-linear-gradient(right,#222,#555 5%,#555 95%,#222 100%) ;
background : -o-linear-gradient(left,#222,#555 5%,#555 95%,#222 100%) ;