Des dégradés sans image avec Firefox 3.5 (et CSS 3)

L’implémentation de -moz-box-shadow par Firefox 3.5 nous promet de belles heures d’amusement. Non seulement elle permet de créer une ombre portée sur un bloc, mais, associée aux couleurs RGBA (avec alpha-channel) et à la propriété inset, elle vous autorise à créer des ombrages internes subtils sans recourir à des images.

Démonstration

Prenez un bouton de navigation standard :

• Accueil
• Rubrique 1
• Rubrique 2
• Rubrique 3
• Rubrique 4

Le source pour ce type de navigation est assez courant. Il faut afficher les éléments de liste sous forme de bloc flottants à gauche. On leur a attribué une couleur différente pour bien marquer l’intérêt de l’effet shadow.

<ul> 
 <li>Accueil</li>
 <li>Rubrique 1</li>
 <li>Rubrique 2</li>
 <li>Rubrique 3</li>
<ul>

// CSS
 li {
 display:block;
 float:left;
 color:white;
 padding:5px;
 margin:0 1px; 
} 
#b1 {
 background-color:#a44; 
} 
#b2 {
 background-color:#884; 
} 
#b3 { 
 background-color:#484; 
} 
#b4 { 
 background-color:#4a4; 
} 
#b5 { 
 background-color:#488; 
}

Jouons avec les ombres

Alors que la spécification box-shadow n’est pas encore implémentée, Firefox 3.5 nous propose sa propre version, -moz-box-shadow. Il suffit alors de s’amuser avec les options pour ajouter l’effet :

Ombre portée floue

On décale l’ombre de 2px vers la droite, de 3px vers le bas, et on ajoute un flou de 4px.

-moz-box-shadow: 2px 3px 4px #000;

Ombre portée translucide

Plus subtil, on ajoute un degré de transparence (alpha) dans la couleur de l’ombre. Elle sera ainsi plus diffuse, plus subtile.

-moz-box-shadow: 2px 3px 4px rgba(0,0,0,0.3);

Ombre interne translucide

C’est là qu’on s’amuse. Avec l’attribut inset, on peut créer en une seule commmande un dégradé qui s’applique à toutes les couleurs de fond ! On place le décalage horizontal à 0px pour que l’ombre soit centrée verticalement. On place l’ombre en bas (-20px). On augmente le flou pour assurer une transition plus douce. Enfin on ajoute un quatrième argument négatif (-10px) pour éviter que l’ombre n’assombrisse les côtés gauche et droit.

-moz-box-shadow: 0px -20px 10px -10px rgba(0,0,0,0.3) inset;

Eclairage interne translucide

Si on veut éclairer plutôt que d’obscurcir, il suffit d’intervertir la couleur et d’ajuster le positionnement.

-moz-box-shadow: 0px 20px 10px -10px rgba(255,255,255,0.3) inset;

Grand format

Avec des mesures en em plutôt que des pixels, on peut agrandir le format d’ensemble en conservant

-moz-box-shadow: 0px 20px 10px -10px rgba(255,255,255,0.3) inset;

Pour aller plus loin

Avec un peu de créativité, on pourra changer la couleur de l’ombre pour assurer un dégradé adapté à la couleur de fond, ou pour des utilisations plus créatives. On peut mélanger cet effet avec les bords arrondis (rounded-borders) pour se faire des boutons de nav super sexy en pur CSS…

Cet effet s’appliquera pour tous les utilisateurs dotés de Firefox 3.5 et n’entraînera aucune dégradation pour les autres. Un exemple parfait d’enrichissement progressif (progressive enhancement) permis par les CSS. Merci Mozilla (et vivement que ce module CSS3 soit répandu) !

Mise à jour : 10 novembre 2009

A l’occasion d’une refonte du thème de ce blog (retour à deux colonnes, comme au bon vieux temps), j’ai intégré les dégradés -moz-box-shadow par petites touches sur le bandeau bleu-gris du haut, ainsi que sur les blocs de navigation à droite. Les utilisateurs de Firefox 3.5+ sont les seuls à en bénéficier, mais ça ne nuit en rien aux autres.