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 chacune des 3 ombres proposées, vous pouvez sélectionner 3 longueurs, et une couleur optionnelle. Les valeurs négatives sont acceptées pour les offsets X et Y. Utilisez les onglets pour définir plusieurs ombres, et l'onglet Police pour personnaliser le texte et la police.

ie: https://fonts.googleapis.com/css?family=Germania+One
ie: 'Germania One', cursive
Effects
Options

Ici vous pouvez personnaliser l'apparance de la zone de visualisation des effets.

Enregistré!
Réinitialisé!


Code CSS à copier



Compatibilité des navigateurs

Pour aller plus loin

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.



Laisser votre avis