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 à onglets avec border-radius et box-shadow

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

Création: juin 2010Modifié:

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

Votez

49 votes3.14

Démo sans images, même en background CSS. Utilisation de la propriété CSS3 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 :)

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


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