Niveau : Confirmé

CSS3 Shadows

CSS3 nous apporte des brides du côté obscur de la force en proposant de gérer des ombres diverses et variées directement depuis votre feuille de styles : blocs et textes sont concernés avec également la combinaison de plusieurs ombrages pour obtenir des effets avancés.

Tutoriel par (WebDesigner grapilleur de Kiwiz, Strasbourg)
Créé le (104225 lectures)
Tags : css, css3, box-shadow, shadow, ombre

Sommaire

  1. Introduction à box-shadow
  2. Introduction à text-shadow

Introduction à box-shadow

Les ombres portées prennent aujourd’hui une place importante dans le web design et permettent la mise en exergue d’éléments importants, ou l’ajout d’une touche de profondeur dans vos graphismes. Il est possible de dire adieu aux images superflues uniquement destinées à la réalisation d’ombres portées ; adieu à la soupe de <div><span>, et autres structures en tableau pour réaliser des effets graphiques riches.

Deux types d’ombres existent en CSS :

  • les box-shadow, les ombres ajoutées aux éléments de type bloc,
  • les text-shadow, les ombres ajoutées au contenu textuel.

Il est évident, comme tout effet graphique, que l’utilisation des ombres doit être faite avec parcimonie et ne pas gêner l'utilisateur.

La propriété box-shadow permet l’ajout d’ombres à un élément de type bloc ou en-ligne. C’est pourquoi dans nos exemples de code, sauf cas exceptionnel, nous utiliserons de manière totalement arbitraire la balise bloc : <div>.

Si vous bloquez sur la différenciation entre élément de type bloc et en-ligne, rendez-vous ici : Initiation au positionnement CSS

Syntaxe de box-shadow

Cette propriété d’ombrage est disponible nativement (sans préfixe) dans la plupart des navigateurs modernes, à savoir Internet Explorer 9+, Firefox 4.0+, Chrome 10+, Safari 5.1+ et Opera 10.5+, et nécessite des préfixes vendeurs pour  les anciennes version de Safari, Chrome et Firefox qui l'implémentaient à titre expérimental.

box-shadow: h-pos v-pos (blur) (spread) (color) (inset);

Voici le détail des valeurs attendues :

Valeur Description Unité
h-pos Position horizontale de l’ombre. Il s’agit de son décalage par rapport à la position de l’élément à ombrer sur l’axe des X. (requise) em, ex, ch, rem, in, pt, pc, cm, mm, px
(peut être négative)
v-pos Position verticale de l’ombre. Il s’agit de son décalage par rapport à la position de l’élément à ombrer sur l’axe des Y. (requise) em, ex, ch, rem, in, pt, pc, cm, mm, px
(peut être négative)
blur Distance du flou, correspond à l’étendu du dégradé de la couleur opaque vers le transparent. (optionnelle - défaut : 0) em, ex, ch, rem, in, pt, pc, cm, mm, px
spread Taille de l’ombre. Permet de redimensionner l’ombre. (optionnelle - défaut : 0) em, ex, ch, rem, in, pt, pc, cm, mm, px (peut être négative)
color Couleur de l’ombre. Définit la couleur de votre ombre, voire son opacité grâce à la gestion de la couche Alpha. (optionnelle - défaut : #000 ou valeur de la propriété color) Valeur de couleur
inset Position interne de l’ombre. Permet de définir l’ombre comme étant une ombre interne et non une ombre portée. (optionnelle - défaut : vide) Valeur : “inset” ou vide.

D'après la spécification du W3C, la couleur est optionnelle et peut être déterminée grâce à la propriété color de l'élément (cette propriété qui offre une couleur à votre texte). Cependant, Webkit n'affiche aucune ombre en l'absence de valeur de couleur dans la déclaration d'une ombre portée.

Il est possible de placer la valeur de la couleur avant ou après les valeurs de mesures (h-pos, v-pos, blur et spread), mais surtout pas au milieu de ces valeurs.

Compatibilité avec les navigateurs

Navigateurs Versions
Internet Explorer Internet Explorer 9.0+
Firefox Firefox 4.0+
Firefox 3.5 et 3.6 avec préfixe -moz-
Chrome Chrome 10.0+
Chrome 4+ avec préfixe -webkit-
Safari Safari 5.1+
Safari 3.1+ avec préfixe -webkit-
Opera Opera 10.5+
Opera Mobile 11+
Android Android 2.1+ avec préfixe -webkit-

Démonstrations

Les images étant plus parlantes que les mots, voici quelques exemples de codes et rendus graphiques. Le bloc choisi sera ce petit cadre gris auquel seront ajoutées différentes sortes d'ombrages. Voici la base du code pour créer cet élément :

En HTML

<div>Contenu</div>

En CSS

div {
   width: 200px;
   padding: 35px 20px;
   line-height: 1.5em;
   color: #444444;
   background-color: #ddd;
   background-image: linear-gradient(#E5E5E5, #CFCFCF);
}

Ombre portée

Ajouter une ombre portée à ce bloc est aisé : il suffit de compléter la feuille de style par cette ligne directement dans la déclaration de l'élément <div>.

box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7); 

L’utilisation de RGBA permet de s'assurer une bonne cohérence entre la couleur de l’ombre et celle du fond, notamment si ce dernier n’est pas de couleur unie.

Démonstration

Ombre interne

Cette ombre va permettre de voir une utilisation de la valeur inset. Voici la ligne de code nécessaire à sa réalisation.

box-shadow: -1px 2px 10px 3px rgba(0, 0, 0, 0.3) inset;

Les informations nécessaires sont donc identiques à une ombre portée externe, il suffit de rajouter la valeur inset pour passer à une ombre interne.

Démonstration

Ombre portée et interne

Il est possible, comme beaucoup de propriétés en CSS3, de déclarer plusieurs ombres en une seule fois :

box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7),
            -1px 2px 20px rgba(255, 255, 255, 0.6) inset; 

Celles-ci sont simplement déclarées les unes à la suite des autres, séparées par une virgule.
Il est ainsi possible de créer des effets d’ombres extrêmement riches et fins en superposant et cumulant plusieurs ombres portées et internes.
Comme vous le montre cette exemple, l’ombre peut pendre la couleur que vous souhaitez, elle peut donc parfaitement servir à la création d’une zone lumineuse, un reflet, ou un halo.

Démonstration

Utilisation avancée

Détournement

Il est possible de pousser l'utilisation des ombres bien plus loin et de créer des effets de bordures spécifiques. En n'ayant pas la main sur le code HTML, ou bien en se contentant d'un simple conteneur, CSS prend le relais efficacement.

Voici le code utilisé pour cet effet de triple bordure :

div {
    padding: 26px;
    border: 1px solid #bbb;
    background: #F4F4F4;
    color: #777;
    box-shadow: 0 0 0 16px #fff inset,
                0 0 0 17px #DAD4D4 inset;
}

Démonstration

Cette méthode offre un simple ajout d'ombres internes très nettes, d'abord blanches sur 16px, puis gris clair sur 17px. L'ombre blanche étant au dessus de l'ombre grise, cet effet de bordure est obtenu.

Note : La première ombre déclarée se trouve au-dessus des autres ombres. Chaque ombre déclarée se place donc en dessous de la précédente.

Ombres et effets avancés

Voici quelques ressources de démonstrations destinées à présenter les possibilités offertes par box-shadow dans des utilisations avancées, notamment avec sa combinaison à d’autres propriétés.

Alternatives

La meilleure des alternatives pour les navigateurs ne comprenant pas box-shadow est encore d'accepter la dégradation gracieuse. Cependant, il est parfois nécessaire de trouver un paliatif. Voici deux scripts qui pourront vous aider :

  • CSS3Pie : permet de jouer avec CSS3 sur IE version inférieure à 9.
  • IE CSS3 : permet de rendre compatible les ombres portées avec IE version inférieure à 9.