Lors de la conception d'un site Web, assurez-vous que l'apparence globale du site Web est esthétiquement agréable afin d'améliorer l'expérience utilisateur. À cette fin, vous pouvez ajouter des images ou du texte sur votre site Web, cependant, l'ajout de texte brut peut avoir un impact négatif sur l'expérience utilisateur, par conséquent, pour améliorer la beauté du texte brut, vous pouvez y ajouter un effet d'ombre en utilisant le CSS Propriété de Text-Shadow.

Nous avons conçu ce tutoriel pour vous faire apprendre comment vous pouvez rendre votre texte brut intéressant de différentes manières en ajoutant des ombres de texte.

Commençons.

Ombre de texte CSS

Vous pouvez ajouter une ombre sur le texte apparaissant sur les pages Web à l'aide de la propriété CSS Text-Shadow. Ici, nous allons démontrer différentes façons que vous pouvez utiliser pour ajouter une ombre à votre texte.

Ajouter une ombre horizontale et verticale

Pour ajouter une ombre sur un texte horizontalement et verticalement, donnez simplement des valeurs des deux dimensions de la propriété Text-Shadow. Suivez l'exemple ci-dessous.

Html

Bonjour le monde

Ici, nous avons créé un

élément et ajouté du texte dedans.

CSS

H1
Text-shadow: 2px 2px;
Couleur bleue;

En utilisant la propriété Text-Shadow, nous donnons 2px aux dimensions horizontales et verticales du texte. De plus, nous fournissons également de la couleur bleue au texte.

Sortir

Une ombre horizontale et verticale a été ajoutée au texte.

Ajouter de la couleur à l'ombre

Une autre chose amusante que vous pouvez faire est d'ajouter de la couleur avec l'ombre au texte. Utilisez l'extrait de code suivant.

CSS

H1
Text-shadow: 2px 2px bleu;

En plus de donner une certaine valeur aux dimensions horizontales et verticales du texte, nous fournissons également la couleur de l'ombre. Cette couleur n'est pas appliquée à l'ombre et non au texte.

Sortir

L'ombre a reçu la couleur bleue.

Ajoutez un effet flou à l'ombre

Dans le but d'ajouter un effet flou à l'ombre, vous devez spécifier l'intensité floue comme troisième valeur à la propriété Text-Shadow. Suivez le code ci-dessous.

CSS

H1
Text-shadow: 2px 2px 6px RVB (255,20,147);

Dans le code ci-dessus, deux valeurs de la propriété Text-Shadow représentent la longueur de l'ombre horizontale et verticale et la troisième valeur représente l'intensité du flou. Nous avons également fourni à l'ombre une couleur rose foncé.

Sortir

L'effet flou a été ajouté avec succès.

Ajoutez un effet brillant à l'ombre

Pour ajouter un effet de lueur juste derrière le texte, suivez l'exemple ci-dessous.

CSS

H1
Text-shadow: 0 0 5px rouge;

Dans l'extrait de code ci-dessus, pour ajouter un effet élogieux, nous attribuons 0px aux dimensions horizontales et verticales du texte, en accordant une certaine valeur au rayon flou avec la couleur rouge.

Sortir

Un effet éclatant a été ajouté au texte.

Ajout de plusieurs ombres

Pour ajouter de nombreuses ombres sur le texte, vous pouvez ajouter une liste d'ombres dans la propriété Text-Shadow séparée par des virgules.

CSS

H1
Text-shadow: 3px 3px 4px jaune, 4px 4px 6px violet;

Dans l'exemple ci-dessus, nous ajoutons un effet d'ombre jaune et violet au texte.

Sortir

Plusieurs ombres ont été ajoutées avec succès.

Ajout d'un contour au texte

Pour ajouter un contour au texte à l'aide de la propriété Text-Shadow, suivez l'exemple ci-dessous:

CSS

H1
Couleur: Bisque;
Text-shadow: 1px 1px noir, -1px -1px noir;

Dans l'exemple ci-dessus, nous avons attribué une ombre de couleur noire avec des dimensions à droite et à la baisse de 1px et des dimensions de haut et de -1px et gauche.

Sortir

Un contour a été ajouté au texte.

Conclusion

Pour rendre votre texte brut intéressant, vous pouvez y ajouter un effet d'ombre en utilisant la propriété Text-Shadow. À cette fin, vous devez spécifier la longueur de la dimension horizontale ainsi que la dimension verticale de l'ombre dans la propriété Text-Shadow. En plus d'ajouter une ombre, vous pouvez également ajouter de la couleur, un effet flou ou un effet de lueur au texte. Il est également possible d'ajouter plusieurs ombres au même texte en utilisant la propriété Text-Shadow. Dans ce guide, nous avons résumé différentes façons d'ajouter un effet d'ombre au texte.