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 prenant soin d’utiliser toutes les versions préfixées.
ul{
/* Fallback si dégradé non dispo*/
background:#D62300;
/* Dégradés */
background: -webkit-linear-gradient(#F65E01,#D62300);
background: -moz-linear-gradient(#F65E01,#D62300);
background: -o-linear-gradient(#F65E01,#D62300);
background: linear-gradient(#F65E01,#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: -webkit-linear-gradient(left,#222,#555 5%,#555 95%,#222 100%);
background: -moz-linear-gradient(left,#222,#555 5%,#555 95%,#222 100%);
background: -o-linear-gradient(left,#222,#555 5%,#555 95%,#222 100%);
background: linear-gradient(to right,#222,#555 5%,#555 95%,#222 100%);
}Pour comprendre les différentes syntaxes, voir comment utiliser les dégradés CSS.
#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 2012
ç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%) ;
#6par alecour, le 15 juillet 2012
Peut-on avoir le source de cette démo ?
Merci,
alecour@orange.fr
#7par Alessandro, le 21 août 2012
Cool,
Tu dois l’écrire dans une feuille CSS et écris :
il ( ou ul )
Display : Inline-block
#8par minedun6, le 9 octobre 2012
quand je veux mettre des cadres pour entourer mon menu, le cadre est trop petit, une idée pour comment faire pour utiliser un peu plus d’espace ??
#9par majani69, le 21 octobre 2012
Serieux les gars. Avant de vous lancer en aveugle dans les CSS avancés, il serait légitime d’apprendre les bases.
#10par lub, le 2 janvier 2013
Nota : si vous désirez étendre la compatibilité à internet explorer et à opéra, il suffit simplement de remplacer le dégradé du background radient (laissez tout de même un background monochrome) par une ombre interne, qui, bien gérée, aura le même effet.