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 avec coins arrondis et dégradés

Utilisation des sélecteurs CSS3 avancés

Création: juillet 2010Modifié:

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

Votez

103 votes4.47

Utilisation des CSS3 pour créer un menu sans images, avec les dégradés CSS et le pseudo-élément :before (ou ::before).

Cet exemple utilise le sélecteur CSS3 :nth-child afin d’appliquer une couleur de background différente pour chaque item du menu. L’utilisation de classe est donc inutile, le code HTML en est allégé.

ul li:nth-child(1) ul{ background:#0c9; }
ul li:nth-child(2) ul{ background:#09c; }
ul li:nth-child(3) ul{ background:#c09; }
ul li:nth-child(4) ul{ background:#9c0; }
ul li:nth-child(5) ul{ background:#c90; }

Les coins arrondis de chaque bloc de sous-menu sont créés avec la propriété CSS border-radius et avec les dégradés linear-gradient. Voir l’article suivant : Menu sans images

Pour les petites flèches, c’est une extension à l’article Boutons Suivant Précédent, on utilise ici le pseudo-élément css3  ::before afin de rajouter un élément HTML avant chaque bloc dépliable, et on lui applique une bordure bottom, left et right afin de créer la flèche.

Cela nous permet donc de créer un menu avec "effet bulle" ou "popup". Cette technique peut être utilisée pour créer des popups sur les mots au sein d’un texte par exemple, sans utiliser de Javascript ni d’images.

Envie d'une nouvelle démo?

Un p'tit mot...

#1par RealToff, le 5 mai 2011

Vraiment génial ce site !
Les démos permettent de se rendre compte de la puissance des nouveautés en CSS3, et de comprendre comment ça fonctionne. Cela donne pas mal d’idées assez sympa pour créer des design de sites.
Je ne comprend pas pourquoi il y a si peu de commentaires.

En tout cas merci à toi et bonne continuation ;-)

#2par css3create, le 17 mai 2011

Merci pour les encouragements. C’est cool si des personnes comme toi y trouve quelques idées...

#3par MehdiByNight, le 20 juillet 2011

Tout à fait d’accord, ce site est vraiment utilise & bien réalisé.
CSS3 est vraiment une très bonne chose, plus besoin de s’embêter à charger des scripts JS =)
Merci à vous & bonne continuation.

#4par fabiola, le 4 août 2011

Merçi pour l’exemple mais vous pourriez me donner le code ou bien les element avec quoi vous avez fait le sous menu ?merçi d’avance

#5par css3create, le 4 août 2011

@fabiola : je vous laisse regarder dans le code CSS de la page. Il existe plusieurs tutoriels très bien fait sur le net pour réaliser ce genre de menu. Ici, je m’attache à expliquer plutôt le coté CSS3. ( Regardez du coté d’Alsacréations.com )

#6par theshwal, le 11 août 2011

Bonjour et bravo pour ce site,vraiment superbe. Ca deja été demandé mais ca serrait vraiment sympa de partager les CSS présenté. De plus je n’arrive pas a faire apparaitre le ^ dans le menu. Quelle est l’astuce ? Merci d’avance et longue vie a ce site.

#7par theshwal, le 11 août 2011

bon, en fait, j’ai reussi a trouver comment faire un triangle sur : http://css-tricks.com/snippets/css/...

#8par css3create, le 11 août 2011

@theshwal : Merci pour les encouragements. Tu aurais pu trouver comment faire ici aussi : Boutons Suivant Précédent. Si je ne donne pas le code CSS en entier, c’est que je n’en vois pas l’utilité...D’autant plus que le CSS est présent dans la source. Je m’attache plutôt à expliquer ce qui touche aux propriétés CSS3.

#9par theshwal, le 11 août 2011

merci de ta réponse et j’ai effectivement pris ton code. Mais dans le tutoriel que tu site tu n’explique malheureusement pas comment réaliser le triangle. Tu donnes effectivement le CSS mais celui ci n’étant pas commenté, cela reste un peut trop complexe pour moi malheureusement. Mais encore merci pour ces magnifiques réalisations.

#10par Daniel, le 22 novembre 2011

dommage que l’on ai pas le code complet pour le "menu avec coin arrondi et dégradé". Autrement merci pour ce site très intéressant.

#11par lady, le 12 février 2012

bonjour, et merci beaucoup pour ces tutos. C’est vraiment encourageant.

Est ce possible d’avoir le code complet s’il vous plaît. Et merci encore pour vos connaissances partagées

#12par Damien, le 6 avril 2012

Je trouve ce site vraiment top félicitation.
Cela dit j’adore ce menu aurais tu le code html et CSS complet ?
Merci

#13par MaxHTML, le 26 septembre 2012

Merci pour vos super tutos , continuez :)

#14par Grey, le 9 décembre 2012

Je le dis ici mais je pourrais le dire sur tellement de pages du site : Vraiment un superbe travail et comme dit RealToff un peu plus haut, le site "permet de comprendre comment ça fonctionne, il donne pas mal d’idées pour créer des design de sites" . J’ajouterai qu’il donne aussi l’envie d’apprendre. BRAVO, effet réussi ^^ et un Grand MERCI de partager !

#15par AGoodGuy, le 24 janvier 2013

Franchement, bravo c’est magnifique ce que tu / vous faites !

#16par Tyty, le 28 février 2013

Super vos demos, merci ! Par contre je participe aussi a la petition pour que soit affiche le ptit bout de code CSS 3 :)

#17par modepa, le 23 avril 2013

Merci beaucoup ! Ces petites astuces nous permettent d’ajouter un peu plus de vivacité sur un site, sans le surcharger de script Javascript !
Encore merci pour votre aide !!!!!

#18par bibou, le 3 juillet 2013

Bonjour, je veux modifier le couleur de ce menu et je n’ai pas trouvé. Est ce que vous pouvez m’aider et merci ?

#19par Flash, le 16 octobre 2013

Bonjour à tous, tout d’abord merci pour t’es tutos ils m’ont bien inspiré, mais je bloque maintenant car je souhaite afficher un deuxième sous menu..

Le problème n’étant pas de l’afficher (le deuxième sous menu) quand on survole le premier, mais le problème est de cacher le deuxième sous menu .. En effet quand je survole le menu, le sous-menu apparait ainsi que le deuxième sous-menu.
J’ai essayer de faire un sous menu lambda (très moche d’ailleurs) et tout marche à merveille mais pas avec le tiens.
Dans l’attente de réponse .
Cordialement.

#20par Flash, le 18 octobre 2013

C’est bon j’ai finalement trouver comment faire, et j’ai même ajoutés quelques fonctionnalités en plus !
Cordialement,

#21par post-six, le 10 février 2014

Bonjour , ton superbe génial .... merci et bonne continuation :)

#22par victhiolita, le 25 février 2014

vraiment super !!! merci !!


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