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 9.0+ |
 |
Firefox 4.0+ Firefox 3.5 et 3.6 avec préfixe -moz- |
 |
Chrome 10.0+ Chrome 4+ avec préfixe -webkit- |
 |
Safari 5.1+ Safari 3.1+ avec préfixe -webkit- |
 |
Opera 10.5+ Opera Mobile 11+ |
 |
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.
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.
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.
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;
}
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.
- Drop Shadows with CSS3 - par Divya Manian
- CSS Drop shadows without images - par Nicolas Gallagher
- Découvrez les mystères d'effets d'ombres avancés avec box-shadow - par Geoffrey Crofte
- Démonstration d'une technique alternative d'ombres incurvées - par Geoffrey Crofte
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 :