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

Menu sans images

Utiliser les dégradés et les ombres en CSS

Création: juin 2010Modifié:

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

Votez

61 votes4.05

Utilisation des fonctions CSS3 linear-gradient afin de créer des dégradés en full CSS. Utilisation également de box-shadow pour les ombres sur les boites.

Dans 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.

Envie d'une nouvelle démo?

Un p'tit mot...

#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.


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.)