Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

text-shadow - Propriété CSS

text-shadow

Résumé des caractéristiques de la propriété text-shadow

Description rapide
Définit tous les paramètres d'une ombre appliquée au texte.
Statut
Standard
S'applique à
Tous les éléments contenant du texte.
Pourcentages
Ne s'appliquent pas.
Valeur initiale
none
Héritée par défaut
Non
Type d'animation
Computed value : lors d'une animation, la propriété text-shadow passe progressivement d'une valeur à une autre.
Module W3C
Module CSS - Décoration du texte
Références (W3C)
 🡇  
 🡅  
Statut du document:: WD (document de travail)

Statut du document:: CRD (document proposé pour la recommandation)

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.
fest 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:
 none none x y x y , , f f c c
;
  • text-shadow: none;
    Exemple

    Valeur par défaut : le texte n'est pas ombré.

  • text-shadow: 10px 10px 5px blue; x y f c
    Exemple

    Une ombre est définie pour le texte, avec les caractéristiques suivantes :

    1. x et y 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.
    2. 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.
    3. 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 c2
    Exemple

    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.

Ombre discrète

Ombre diffuse, donnant l'impression d'un texte en suspension

Ombres multiples

Utilisation d'un ombrage pour créer un effet de relief

Ombrage sur un texte transparent

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.

Flou
Mobile

Prise en charge de text-shadow par les navigateurs (compatibilité).

1
text-shadow
Estimation de la prise en charge en pourcentage du parc actuel.
98%

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.

Propriétés.

Choisit le soulignement, le surlignement ou la rayure du texte.
Définit la couleur du trait de décoration.
Type de décoration : souligné, barré, etc.
Propriété raccourcie définissant certaines particularités relatives aux décorations.
Définit comment les décorations héritées des éléments parents doivent être appliquées.
Définit si les lignes de décoration (essentiellement le souligné) s'interrompent au niveau des jambages.
Définit comment les décorations de l'élément lui même (et non pas celles des éléments parents) doivent être appliquées.
Définit si les décoration du ou des éléments parents doivent être appliquées à cet élément.
Définit si les lignes de décoration (soulignement, rayure...) concernent les espaces.
Type de trait pour la décoration : plein, pointillé, etc.
Définit l'épaisseur des traits de décoration (souligné, barré, surligné).
Mise en exergue du texte.
Définit la couleur des caractères de mise en exergue.
Position des caractères de mise en exergue.
Définit si les mises en exergue doivent s'interrompre sur les espaces, les signes de ponctuation, etc.
Style de mise en exergue.
Définit la position du trait de soulignement, par rapport à la position de base.
Définit l'emplacement des traits de soulignement.