Suivre

Actualités du site CSS3Create

Actualités sur CSS et le web en général

Menu à onglets avec border-radius et box-shadow

Réalisez des onglets avec effets de rollover et de profondeur

Création: juin 2010Modifié:

Contenu
HTML + CSS NO JS NO IMG
Navigateurs
Firefox Safari Chrome Opéra
Propriétés CSS3
box-shadow gradient border-radius
Partagez
Facebook Twitter

Votez

24 votes2.82

Démo sans images, même en background CSS. Utilisation des propriétés CSS3 border-radius, -moz-border-radius, -webkit-border-radius pour créer des effets d’onglets sans utiliser d’images. Également l’utilisation de box-shadow.

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

Envie d'une nouvelle démo?

Un p'tit mot...

#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 :)


Un message, un commentaire ?
    Qui êtes-vous ? (optionnel)
  • (Pour créer des paragraphes, laissez simplement des lignes vides.)