Dans ces exemples, on utilise border-radius pour créer des boutons de menu arrondis. Dans l’exemple 1, les quatre coins ont le même rayon alors que dans l’exemple 2, on définit deux valeurs pour chaque coin. Cela permet de créer des angles non circulaires.
Menu 1 :
border-radius: 10px;
Menu 2 :
border-radius: 10px 10px 0px 0px / 30px 30px 0px 0px;
On utilise également box-shadow afin de définir plusieurs ombres par boite : une ombre interne (avec le mot-clé inset
et des ombres externes (vers le haut notamment). Les différentes ombres sont séparées par une virgule.
Menu 2 :
box-shadow: 1px 1px 2px #360 inset,
0px 0px 1px black,
0px -1px 1px white;
Comprendre le fonctionnement de border-radius Comprendre le fonctionnement de box-shadow Comprendre le fonctionnement des dégradés CSS
#1par gigyboys, le 24 février 2011
très intéressant
#2par Hajar, le 22 avril 2011
Merci beaucoup
#3par Number, le 8 juin 2011
sympa mais pour explorer ?
#4par ngo, le 8 octobre 2011
Vraiment j’aime vos tutoriels, j’aimerai que des livres et cours soient disponibles pour ces genres des choses.
#5par Rédicule, le 27 décembre 2011
A quoi bon présenter un menue sans donner le code ?
Completement stupid ce site :)
#6par lecarlyte, le 22 juin 2012
maerci
#7par robin4a4, le 1er octobre 2012
on peut trouver le code en l’affichant dans le navigateur :) je trouve ce site vraiment très intéressant avec des démos superbes !
#8par FrogWeb, le 11 octobre 2012
C’est toi qui est stupide, Rédicule, de ne pas savoir que l’on peut voir le code source d’un site en faisant un clic droit.