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 :

CSS - Propriété text-shadow

Description.

La propriété text-shadow définit l'effet d'ombrage appliqué au texte de l'élément :

  • 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.

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.

Exemple : text-sahdow:2px 2px silver, 5px 5px black;

Syntaxes pour 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 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 de dimensions en CSS). 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 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.

Exemples.

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

Voir aussi...

Polices et caractères - Propriétés.

  • font : Raccourci pour définir la plupart des propriétés concernant les polices de caractères.
  • font-display : Détermine le comportement du navigateur face aux polices de caractères longues à charger.
  • font-family : Définit le nom de la police de caractères.
  • font-feature-settings : Permet d'exploiter les fonctionnalités spécifiques des polices de caractères OTF, WOFF, etc.
  • font-kerning : Ajustement du crénage entre caractères.
  • font-size : Ajuste la taille des caractères.
  • font-size-adjust : Définition du coefficient d'aspect de la police.
  • font-stretch : Modifie l'étirement ou la compression des caractères.
  • font-style : Sélectionne les styles italique ou oblique de la police de caractères.
  • font-synthesis : Autorise ou non le calcul des styles manquants dans la police de caractères.
  • font-variant : Raccourci permettant de définir les attributs typographiques évolués : ligatures, substitution de caractères, etc.
  • font-variant-alternates : Met en œuvre la substitution de caractères (polices OTF, WOFF).
  • font-variant-caps : Applique une capitalisation des caractères.
  • font-variant-east-asian : Typographie spécifique aux caractères chinois ou japonais.
  • font-variant-ligatures : Active ou désactive la ligature des caractères.
  • font-variant-numeric : Met en œuvre les modes d'affichage des nombres évolués : fractions, numéros, etc.
  • font-weight : Sélectionne une graisse pour les caractères.
  • text-decoration : Choisit le soulignement, le surlignement ou la rayure du texte.
  • text-decoration-color : Définit la couleur du trait de décoration.
  • text-decoration-line : Type de décoration : souligné, barré, etc.
  • text-decoration-style : Type de trait pour la décoration : plein, pointillé, etc.
  • text-transform : Casse du texte (minuscules, majuscules...).

Polices et caractères - Directives.

  • @charset : Indique le jeu de caractères utilisé dans la feuille de styles.
  • @font-face : Définit tous les paramètres d'une police de caractères téléchargeable.
  • @font-feature-values : Définit les variantes typographiques à utiliser.