SEMrush
SEMrush
En savoir plus sur ces produits

Générateur d'ombre textuelle via Text Shadow

La propriété text-shadow ajoute une ou plusieurs ombres à un texte. C'est une liste d'ombres séparées par des virgules. Pour chaque 3 ombre ajoutée, vous pouvez sélectionner 3 longueurs, et une couleur optionnelle. Les valeurs négatives sont acceptées pour les offsets X et Y.

Preview

Enregistré!

Réinitialisé!
Code CSS à copier
 

Text-shadow expliquée

La propriété text-shadow vous permet d'ajouter un effet d'ombre à un texte.
Supposons que vous ayez un élement identifié MonDiv contenant un texte, et défini comme ci-dessous :

<div id="MonDiv"> Mon Texte </div>

La syntaxe de text-shadow est la suivante :

#MonDiv { text-shadow: 2px 2px 2px rgba(0,0,0,0.7);
}

Les deux premiers paramètres définissent la position de l'ombre sur l'axe X (horizontal) et l'axe Y (vertical). Le troisième paramètre ajoute un effet de flou, et le quatrième represente la couleur de l'ombre.

Dans l'exemple ci-dessous, l'ombre se trouve à 2 pixels vers la droite et le bas, a un effet de flou de 2 pixels et une couleurs noire d'opacité 0.7 (quatrième paramètre de la fonction rgba).

La propriété text-shadow est une liste d'ombres séparées par des virgules. Il est donc possible de cumuler autant d'ombres que vous le souhaitez, en ajoutant les valeurs les unes derrière les autres, comme ci-dessous :

#MonDiv { text-shadow: 2px 2px 2px rgba(0,0,0,0.7), 0 0 9px rgba(255,104,34,0.7), -3px -3px 1px rgba(44,255,62,0.7);
}

Dans cet exemple, nous avons ajouté 2 autres ombres de valeurs différentes à l'ombre définie précédemment.

Il est très utile d'utiliser un générateur de CSS comme MakingCSS pour visualiser en temps réel l'effet créé en faisant varier les options.

Compatibilité des navigateurs :

text-shadow


4.0

10.0

3.5

4.0

9.6

Laisser votre avis