Propriété CSS text-shadow

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>

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>

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.

Support de Navigateurs

4.0+ 12.0+ 3.5+ 4.0+ 10.0+


Trouvez-vous cela utile?

Articles Associées