Contour du texte en HTML

Cet article présentera une méthode pour décrire du texte en HTML à l’aide de CSS.

Utilisez la propriété CSS text-shadow pour fournir un contour pour le texte en HTML

Le text-shadow est une propriété CSS qui ajoute une ombre au texte. Il prend une liste d’ombres séparées par des virgules comme valeurs, et chaque ombre contient un décalage X, un décalage Y, un rayon de flou et une couleur.

Par exemple, si un texte a une propriété tet-shadow de 1px 1px 3px black, cela signifie que l’ombre du texte du texte a un décalage X de 1px, un décalage Y de 1px , un rayon de flou de 3px et a la couleur black. Le décalage X et le décalage Y sont responsables de la direction de l’ombre du texte, et le décalage X représente l’ombre dans une direction horizontale, tandis que le décalage Y représente l’ombre dans une direction verticale.

Le rayon de flou définit la distance du texte jusqu’à laquelle l’ombre doit être floutée. Pour donner au texte un contour complet, nous devons définir plusieurs valeurs de text-shadow pour que le texte ait un contour dans toutes les directions.

Par exemple, créez un <div> et écrivez un texte aléatoire à l’intérieur, et donnez à <div> un nom de classe outline. En CSS, sélectionnez la classe outline.

Définissez sa propriété color sur white. Ensuite, définissez la propriété text-shadow de div sur -1px -1px 0 #000, 1px -1px 0 black,-1px 1px 0 black, 1px 1px 0 black;.

Ici, nous avons appliqué quatre couples de valeurs pour la propriété text-shadow. Il crée le contour du texte dans toutes les directions, et nous avons utilisé 0 pour le rayon de flou car nous ne voulons pas que le texte soit flou.

La valeur des décalages accepte également une valeur négative. La valeur négative du décalage X créera l’ombre sur le côté gauche, tandis que le décalage Y négatif créera l’ombre en haut du texte.

Nous définissons également la couleur du texte sur blanc et l’ombre sur noir afin que le texte et le contour soient visibles sur le fond blanc.

Code-HTML :

<div class="outline">
 Text shadow can be used to give an outline to the text.
</div>

Code-CSS :

.outline {
  color: white;
  text-shadow:
               -1px -1px 0 black,
                1px -1px 0 black,
               -1px 1px 0 black,
                1px 1px 0 black;
}

Ainsi, on peut utiliser la propriété CSS text-shadow pour donner un aperçu du texte en HTML.