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 design avec rgba CSS3

Utilisation de la transparence pour créer un menu design

Création: juillet 2010Modifié:

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

Votez

53 votes4.07

Utilisation de la fonction CSS3 rgba() pour créer un menu semi-transparent. Utilisation également des transformations CSS avec -moz-transform, -webkit-transform, -o-transform et transform.

Dans cet exemple, on utilise la fonction CSS3 rgba(R,V,B,Alpha) afin de gérer l’opacité d’un élément. Contrairement à opacity qui rend transparent un élément avec tous ses enfants, rgba() rend transparente la couleur utilisée. La valeur RVB est donc appliquée avec sa valeur d’opacité.

Utilisation également du pseudo-élément ::after pour ajouter le caractère « > » si un menu déroulant existe et transformation CSS de ce caractère pour visuellement informer l’internaute de la position du sous-menu.

ul li a::after{
    content: ">";
    position: absolute;
    right: 5px;
    transform: rotate(270deg);
}

L’utilisation du pseudo-élément permet de s’affranchir de l’utilisation d’élément HTML supplémentaire, de classe (x)HTML, ou d’images CSS.

Envie d'une nouvelle démo?

Un p'tit mot...

#1par Belo, le 23 novembre 2011

L’effet n’est pas compliqué et il rend super bien ! merci

#2par Hodonou Sounton, le 7 juin 2012

Super !

#3par Alain, le 6 décembre 2012

Je passe sur ce site très intéressant, avec Firefox 17.01 et IE 9.0.8112, et l’exemple du menu ci-dessus fonctionne biens, alors qu’il n’est pas référencé ? Etrange, non ?

#4par Vayel, le 21 janvier 2013

Effet agréable au regard. ^^
Par contre, problème d’accessibilité : le menu ne se déroule pas quand on passe le focus.

#5par css3create, le 25 janvier 2013

@Vayel : exact ! Il faudrait que je mette cette démo à jour... :) Et d’autres aussi d’ailleurs.


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