Comment utiliser CSS text-shadow : 11 astuces et exemples

25 juillet 2021 Hibou Gourou

CSS est un langage de conception qui rend les pages Web plus élégantes que des morceaux de texte simples. text-shadow est une propriété CSS qui ajoute des ombres au texte et le rend plus attrayant visuellement. Vous pouvez créer de superbes conceptions de texte à l'aide d'une combinaison d'ombres de texte, de polices, de couleurs et de couleurs d'arrière-plan.

Dans cet article, nous vous guiderons à travers différents exemples d' ombres de texte utilisant CSS.

Ombre de texte à l'aide de CSS

La propriété CSS text-shadow ajoute des ombres et des calques au texte. L'ajout d'une ombre de texte au texte peut améliorer, mettre en évidence ou augmenter l'attrait visuel du texte de votre application. Cette propriété CSS accepte une liste d'ombres séparées par des virgules à appliquer au texte.

Syntaxes de la propriété CSS text-shadow

 /* You can use 4 arguments with the text-shadow CSS property:
 offset-x, offset-y, blur-radius, and color */
 /* offset-x | offset-y | blur-radius | color */
 text-shadow: 2px 2px 4px red;
 /* color | offset-x | offset-y | blur-radius */
 text-shadow: #18fa3e 1px 2px 10px;

 /* The color and blur-radius arguments are optional,
  if you want, you can remove them. Default values of
  color and blur-radius would be considered */
 text-shadow: 10px 20px;

 /* You can use color argument before or after
  the offset-x and offset-y arguments */
 text-shadow: 10px 10px blue;
 text-shadow: blue 10px 10px;

 /* The text-shadow CSS property also supports Global values */
 text-shadow: inherit;
 text-shadow: initial;
 text-shadow: revert;
 text-shadow: unset;

Connexes : Composants de conception neumorphique en HTML, CSS et JavaScript

MDN Web Docs définit ces valeurs comme :

<couleur> : Facultatif. La couleur de l'ombre. Il peut être spécifié avant ou après les valeurs de décalage. Si elle n'est pas spécifiée, la valeur de la couleur est laissée à l'appréciation de l'agent utilisateur. Par conséquent, lorsque la cohérence entre les navigateurs est souhaitée, vous devez la définir explicitement.

<offset-x> <offset-y> : Obligatoire. Ces valeurs <longueur> spécifient la distance de l'ombre par rapport au texte. <offset-x> spécifie la distance horizontale ; une valeur négative place l'ombre à gauche du texte. <offset-y> spécifie la distance verticale ; une valeur négative place l'ombre au-dessus du texte. Si les deux valeurs sont 0, l'ombre est placée directement derrière le texte, bien qu'elle puisse être partiellement visible en raison de l'effet de <blur-radius> .

<blur-radius> : Facultatif. Il s'agit d'une valeur <longueur> . Plus la valeur est élevée, plus le flou est important ; l'ombre devient plus large et plus claire. S'il n'est pas spécifié, la valeur par défaut est 0.

Voici quelques exemples impressionnants d' ombres de texte qui peuvent améliorer l'interface utilisateur de votre site Web au niveau supérieur. Assurez-vous d'importer les polices mentionnées dans votre fichier CSS à partir de Google Fonts .