Propriété CSS text-shadow

❮ Précédent Suivant ❯

La propriété text-shadow CSS permet d'ajouter des ombres au texte. Vous pouvez choisir des couleurs d'ici: Les couleurs HTML.

Chaque ombre est spécifiée par 2 à 3 valeurs de longueur et par <color>. La première valeur définit la distance horizontale (décalage-x), la deuxième valeur définit la distance verticale (décalage-y), et la troisième valeur définit le rayon de flou et la valeur color définit la couleur de l'ombre.

Décalage-x et décalage-y sont obligatoires, la troisième valeur est facultative.

Valeur initiale	none
Appliquée à	Tous les éléments. Elle est aussi appliquée aux éléments pseudos ::first-letter et ::first-line.
Héritée	Oui.
Animable	Oui.
Version	CSS3
Syntaxe DOM	object.style.textShadow = "1px 3px 3px #8ebf42";

Syntaxe

text-shadow: h-shadow v-shadow blur-radius color | none | initial | inherit;

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .shadow{   	
      text-shadow: 2px 2px #1c87c9;  
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété text-shadow</h2>
    <p>Quelque paragraphe par exemple.</p>
    <p class="shadow">Quelque paragraphe avec la propriété text-shadow.</p>
  </body>
</html>

Essayez-vous-même!

Un exemple dans lequel le décalage-x, décalage-y, rayon de flou et la couleur sont spécifiés:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
      text-shadow: 5px 3px 2px #8ebf42;
      font: 1em Roboto, Helvetica, sans-serif;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété text-shadow</h2>
    <p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte.</p>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
h-shadow	Le décalage horizontal de l'ombre. Si positif, l'ombre est dessinée à droite du texte, si elle est négative, à gauche.
v-shadow	Le décalage vertical de l'ombre (y-axis). Si positif, l'ombre est en dessous du texte, si négatif est dessiné au-dessus.
blur-radius	Le rayon de flou définit la taille et le degré de flou de l'ombre. Nous ne pouvons pas utiliser de valeurs négatives. La valeur par défaut est 0.
color	Nous permet de choisir une couleur de l'ombre. Les noms de couleur, codes de couleur hexadécimaux, rgb (), rgba (), hsl (), hsla () peuvent être utilisés.
none	Aucun ombre n'est spécifiée. C'est la valeur initiale de cette propriété.
initial	Fait utiliser la valeur initiale.
inherit	Hérite la propriété de son élément parent.