text-shadow - Propriété CSS
Résumé des caractéristiques de la propriété text-shadow
none
text-shadow
passe progressivement d'une valeur à une autre.Description.
La propriété text-shadow
définit l'effet d'ombrage appliqué au texte de l'élément. L'ombre suit la forme
de chacun des caractères :
Ce texte comporte un ombrage
L'ombrage est défini par quatre paramètres :
- Le décalage horizontal. Un nombre positif indique un décalage sur la droite tandis qu'un nombre négatif indique un ombrage sur la gauche du texte.
- Le décalage vertical. Un nombre positif indique un décalage vers le bas tandis qu'un nombre négatif indique un ombrage au dessus du texte.
- Le degré de flou à appliquer à l'ombrage (valeur optionnelle).
- La couleur. Par défaut l'ombrage est de la même couleur que le texte.
Il est possible de spécifier plusieurs ombrages en indiquant plusieurs jeux de valeurs séparés par une virgule. Ces ombrages sont tous appliqués et se superposent.
L'ajout d'un ombrage ne modifie en rien la mise en page : par exemple l'élément n'est pas agrandi pour contenir l'ombre. Et d'autre part, l'ombre n'est pas limitée à la surface de l'élément, ce qui veut dire que l'ombre peut dans certains cas dépasser les bords de l'élément.
Ombre qui déborde de l'élément
⚠ La norme fait référence au mot clé inset
à ajouter à la syntaxe, et qui empêcherait
l'ombre de déborder de l'élément. Mais cette syntaxe n'est reconnue par aucun navigateur (2022).
Consultez également la page sur la propriété box-shadow
qui applique un ombrage sur l'élément lui-même.
Syntaxes pour text-shadow
.
x
et y
sont les dimensions de l'ombrage.
f
est la dimension du flou.
c
est la couleur de l'ombre.
Cette syntaxe peut être répétées plusieurs fois avec la virgule comme séparateur.
text-shadow:
;
- text-shadow: none;Exemple
Valeur par défaut : le texte n'est pas ombré.
- text-shadow: 10px 10px 5px blue; x y f cExemple
Une ombre est définie pour le texte, avec les caractéristiques suivantes :
x
ety
sont les décalages horizontal et vertical de l'ombre. Ces deux valeurs peuvent être positives ou négatives, et doivent être suivies d'une unité de dimension (voir les unités CSS de dimension). Les pourcentages ne sont pas autorisés.f
détermine le flou de l'ombre,0
correspondant à une ombre nette, sans flou. Plus cette valeur est élevée, plus le flou est important.
Les valeurs négatives et les pourcentages ne sont pas autorisés.- Enfin,
c est la couleur de l'ombrage. Toutes les syntaxes reconnues par CSS peuvent être utilisées (voir les couleurs CSS).
- text-shadow: 10px 10px 5px blue, 5px 5px 0 red; x1 y1 f1 c1 x2 y2 f2 c2Exemple
Cette syntaxe définit deux ombres. Il est possible d'appliquer plusieurs ombrages à un texte en énumérant plusieurs série de valeurs, les séries étant séparées par des virgules.
- text-shadow:
initial
; text-shadow:inherit
; text-shadow:revert
; text-shadow:revert-layer
; text-shadow:unset
;La valeur initiale est :
.none
Exemples d'utilisation de text-shadow
.
Animation de la propriété text-shadow
.
Comme pour toutes les propriétés visuelles, l'animation de text-shadow
est riche en possibilités.
Prise en charge de text-shadow
par les navigateurs (compatibilité).
text-shadow
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
Oméra mini
Voir aussi, dans le même module de standardisation que text-shadow
.
Les spécifications CSS éditées par le W3C sont organisées en modules. text-shadow
fait partie du Module CSS - Décoration du texte (CSS Text Decoration Module). Les définitions suivantes sont également décrites dans ce même module.