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

Arc en ciel

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;
Ombre interne

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;
Eclairage interne

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;
Eclairage interne grand format

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.

Outil de référencement professionnel - essai gratuit Ce contenu a été publié dans Webdesign, avec comme mot(s)-clé(s) , , , , , . Vous pouvez le mettre en favoris avec ce permalien.

6 réponses à Des dégradés sans image avec Firefox 3.5 (et CSS 3)

  1. Ernest dit :

    J’aime cette version de FF, car il fonctionne beaucoup mieux que la précédente!

  2. chandour dit :

    Firefox est tjrs le meilleur avec ses nouveautes

  3. chandour dit :

    Firefox est tjrs le meilleur avec ses mises a jour

  4. Zlowtech dit :

    @chandour : C’est du css3, c’est fait pour Gecko (Firefox), WebKit (Safari & Chrome) et Vinageer.
    Les autres devront se conformer.

    Ce qui serait bien serait que ça marche sur tous les browsers ;)

  5. sdk dit :

    Est-il possible de faire des dégradés de gauche à droite plutôt que de haut en bas ?

  6. Le Caphar Damien Ravé dit :

    @zdk : oui c’est possible, par exemple avec le code suivant : -moz-box-shadow : 109px 0 84px -84px #000000 inset ;

    Tu obtiens un dégradé du noir (à gauche) vers ta couleur de fond (à droite). Le 84px (3e argument) désigne le flou que j’ai voulu appliquer. Le -84px sert à « éloigner » le dégradé du centre pour masquer le haut et le bas. Le 109px sert finalement à combler l’écart pour faire apparaître 25 pixels de dégradé à gauche (109-84 = 25px).

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *