text-shadow

La propriété text-shadow permet d'ajouter une ombre au texte. Cette propriété peut être utilisée avec une liste d'ombres séparées par des virgules qui seront appliquées au texte de l'éléments et aux effets décoratifs (cf. text-decorations).

Chaque ombre est définie par un décalage relatif au texte et cette définition peut éventuellement inclure des couleurs et des rayons de flou.

Si on a plusieurs ombres, celles-ci seront empilées les unes sur les autres : la première ombre définie apparaîtra sur le dessus.

Cette propriété s'applique aux deux pseudo-éléments ::first-line et ::first-letter.

Syntaxe

/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 2px black; 

/* color | offset-x | offset-y | blur-radius */
text-shadow: #CCC 1px 0 10px; 

/* offset-x | offset-y | color */
text-shadow: 5px 5px #558ABB;

/* color | offset-x | offset-y */
text-shadow: white 2px 5px;

/* offset-x | offset-y
/* Use defaults for color and blur-radius */
text-shadow: 5px 10px;

/* Global values */
text-shadow: inherit;
text-shadow: initial;
text-shadow: unset;

Valeurs

<color>

Cette valeur est optionnelle, elle peut être utilisée avant ou après les valeurs de décalage. Si aucune couleur n'est spécifiée, une couleur, choisie par l'agent utilisateur, sera uilisée. Si vous souhaitez garantir une cohérence entre les navigateurs, il est préférable d'en définir une explicitement.

<offset-x> <offset-y>

Ces valeurs sont obligatoires. Ce sont des valeurs de longueur (type <length>) qui définissent le décalage de l'ombre par rapport au texte. <offset-x> définit la distance horizontale : une valeur négative placera l'ombre à gauche du texte. <offset-y> définit la distance verticale : une valeur négative placer l'ombre au-dessus du texte. Si les deux valeurs sont 0, l'ombre sera placée derrière le texte (ce qui peut générer un effet de flou si on utilise <blur-radius>).
Les différentes unités qui peuvent être utilisées sont listées sur <length>.

<blur-radius>

Cette valeur est optionnelle. C'est une valeur de longueur (type <length>). Si elle n'est pas utilisée, la valeur par défaut sera 0. Plus la valeur sera élevée, plus le flou de l'ombre sera important : l'ombre deviendra plus large et plus légère.

Syntaxe formelle

none | <shadow-t>#
où 
<shadow-t> = [ <length>{2,3} && <color>? ]
où 
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
où 
<rgb()> = rgb( <rgb-component>#{3} )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> )
<hsla()> = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<named-color> = <ident>
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowText
où 
<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>

Exemples

Premier exemple avec une ombre rouge

.red-text-shadow {
   text-shadow: red 0 -2px;
}

<p class="red-text-shadow">
   Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo 
   inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</p>

Deuxième exemple avec une ombre bleue diffuse

.white-with-blue-shadow {
   text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
   color: white;
   font: 1.5em Georgia, "Bitstream Charter", "URW Bookman L", "Century Schoolbook L", serif;
}

<p class="white-with-blue-shadow">
   Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore 
   veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</p>

Troisième exemple avec une ombre dorée sur fond doré

.gold-on-gold {
   text-shadow: rgba(0,0,0,0.1) -1px 0, rgba(0,0,0,0.1) 0 -1px,
   rgba(255,255,255,0.1) 1px 0, rgba(255,255,255,0.1) 0 1px,
   rgba(0,0,0,0.1) -1px -1px, rgba(255,255,255,0.1) 1px 1px; 
   color: gold;
   background: gold;
}

<p class="gold-on-gold">
   Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore 
   veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</p>

Spécifications

Compatibilité des navigateurs

[1] En théorie, Gecko (Firefox) supporte une infinité d'ombres. Gecko 2  (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) et les versions ultérieures ont ajouté une limite au rayon de flou (300) pour des raisons de performance. Si la valeur <color> n'est pas définie, Gecko utilisera la valeur de la propriété color pour l'élément.

[2] Opera supporte un maximum de 6 à 9 ombres pour des raisons de performances, le rayon de flou est limité à 100 pixels. Opera 9.5-10.1 respecte l'ancien ordre pour la peinture des ombres (pour CSS2, la première ombre définie était celle qui était la plus en-dessous).

[3] Internet Explorer 5.5 supporte les filtres propriétaires Microsoft Shadow et DropShadow.

[4] Avec Safari, toute ombre qui n'a pas de couleur explicitement définie sera transparente. Safari 1.1-3.2 ne supporte qu'une seule ombre (seul le premier élément de la liste est géré, les autres sont ignorés). Safari 4.0 (WebKit 528) et les versions ultérieures supportent plusieurs ombres. Konqueror supporte les ombres à partir de la version 3.4.

Voir aussi

• box-shadow