La propriété text-shadow permet, comme son nom l'indique, de rajouter une ombre portée aux contenus textuels.
Cette propriété initialement proposée pour la version 2 de CSS a finalement été retirée dans CSS 2.1, puis réintégrée dans la troisième mouture.
Nous allons voir comment créer des effets variés sur du texte.
Syntaxe de text-shadow
La syntaxe est un peu plus simple que celle de box-shadow.
text-shadow: h-pos v-pos (blur) (color);
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 |
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 : valeur de la propriété color de l'élément.) |
Valeur de couleur |
Comme pour box-shadow, les spécifications précisent que sans couleur renseignée pour l'ombre, la valeur de la propriété color de l'élément sert de référent à la couleur de l'ombre.
Cependant, si Firefox et Opera attribuent la valeur de la propriété CSS color du texte, Chrome et Safari attribuent du transparent, la couleur semble donc obligatoire sur WebKit.
Compatibilité avec les navigateurs
| Navigateurs | Versions |
|---|---|
 |
Internet Explorer 10+ |
 |
Firefox 3.5+ |
 |
Chrome 4.0+ |
 |
Safari 3.1+ |
 |
Opera 9.5+ |
Démonstrations
Les exemples qui suivent sont tirés de diverses pratiques croisées sur le web souvent réalisées à l'aide d'images. Voici un texte basique, d'assez grand corps pour que les effets soient bien visibles.
Ombre portée simple
L'ombre portée utilisée simplement peut permettre d'ajouter un peu de profondeur au contenu textuel. C'est idéal pour un titre par exemple. Voici la syntaxe de l'ombre :
text-shadow: 1px 2px 3px rgba(0,0,0, 0.5);
Elle peut également permettre d'augmenter le contraste entre le fond et le texte afin d'améliorer le confort de lecture.
Voici une autre ombre plus centrée sur le texte.
text-shadow: 0 0 7px rgba(0,0,0, 0.5);
Attention : l'utilisation du text-shadow dans le cas d'une amélioration de contraste n'est pas conseillée dans la mesure où tous les navigateurs ne comprennent pas cette propriété. Quid du confort de lecture sur IE9 sans ombre portée ?
Bordure de texte
Il est possible de proposer une combinaison de plusieurs ombres sur un même texte. Pour ce faire il suffit de séparer les différents ensembles de valeurs par une virgule, comme nous l'avons déjà vu pour box-shadow.
text-shadow: -1px 0 0 rgba(0, 0, 0, 0.8),
1px 0 0 rgba(0, 0, 0, 0.8),
0 -1px 0 rgba(0, 0, 0, 0.8),
0 1px 0 rgba(0, 0, 0, 0.8);
Ici 4 ombres sont créées, et décalées d'un pixel dans les quatre directions. La qualité du rendu sur cet effet dépend du lissage de la police.
Attention : utilisez une couleur de texte qui permette la lecture sans le text-shadow.
Effet d'anaglyphe
L'effet d'anaglyphe est aisément réalisable avec deux ombres portées. Voici un code qui peut parfaitement reproduire cet effet.
text-shadow: -0.6em 0 red,
0.6em 0 cyan;
S'il vous reste des lunettes 3D avec des filtres deux couleurs, vous pouvez toujours voir l'effet 3D produit ;)
Effet de perspective
L'effet de perspective demande quelques couches d'ombres portées nettes, toutes décalées d'un pixel de plus que l'ombre précédente.
text-shadow: 0 1px 0 #eee,
0 2px 0 #e5e5e5,
-1px 3px 0 #C8C8C8,
-1px 4px 0 #C1C1C1,
-2px 5px 0 #B9B9B9,
-2px 6px 0 #B2B2B2,
-2px 7px 2px rgba(0,0,0, 0.6),
-2px 7px 8px rgba(0,0,0, 0.2),
-2px 7px 45px rgba(0,0,0, 0.4);
Effet de ciselage
L'effet de ciselage est un effet léger de découpe. Voici une proposition de code pour réaliser cet effet.
text-shadow: 1px 2px 0 rgba(0,0,0,0.4),
-1px -2px 0 rgba(255,255,255,1);
Il suffit d'intervertir le décallage des ombre pour avoir un effet inversé.
Attention : utilisez une couleur de texte qui permette la lecture sans le text-shadow.
Alternatives en JavaScript
Il existe des filtres pour appliquer des ombres portées ou des ombres textuelles pour Internet Explorer <10. Cependant cest filtres proposent une syntaxe très particulière et les effets proposés ne sont pas très convaincants. Tournons nous vers les solutions en JS :
- jQuery CSS 3 Text-Shadow : plugin jQuery pour la création de text-shadow.
À retenir
Ajouter une ombre sous une boîte ou du texte est un jeu d'enfant. Cependant il convient, à l'heure actuelle, de ne pas oublier qu'il s'agit d'effets graphiques additionnels dont la lisibilité du contenu ne doit pas dépendre.