Un contour de texte en CSS permet d’ajouter une bordure esthétique et accrocheuse autour du texte, le rendant plus visible et distinctif. Cette technique est particulièrement utile pour mettre en valeur des titres, des mots clés ou des sections importantes de contenu.
En CSS, deux propriétés principales permettent de créer un contour de texte :
text-shadow: Crée une série d’ombres déportées autour du texte, simulant un effet de contour.text-stroke: Ajoute une bordure solide autour du texte.
Texte en gris avec contour bleu
Utiliser la propriété text-shadow pour un contour de texte
La propriété text-shadow prend plusieurs valeurs pour définir l’apparence du contour :
offset-xetoffset-y: Définissent le décalage horizontal et vertical des ombres par rapport au texte.blur-radius: Contrôle le flou des ombres. Une valeur plus élevée crée un contour plus flou.color: Spécifie la couleur du contour.
Exemple de contour simple avec text-shadow
Ce code fournit un contour noir à un texte en blanc.
p {
text-shadow: -1px -1px 0 #000, /* Contour en noir */
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
font-size: 30px;
color: #fff; /* Texte en blanc */
} Texte avec contour avec la propriété text-shadow
Utiliser la propriété text-stroke pour un contour de texte
La propriété text-stroke est plus simple que text-shadow et ne prend que deux valeurs :
stroke-width: Définit l’épaisseur du contour.stroke-color: Spécifie la couleur du contour.
p {
-webkit-text-stroke: 1px #C00; /* Contour en rouge */
text-stroke: 1px #C00; /* Contour en rouge */
font-size: 30px;
color: #777; /* Texte en gris foncé */
}Cet exemple crée un contour rouge de 1 pixels d’épaisseur.
Texte avec contour avec la propriété text-stroke
La prise en charge des propriétés text-shadow et text-stroke varie selon les navigateurs. Il est recommandé de tester votre code sur différents navigateurs pour vous assurer d’une compatibilité optimale.
L’utilisation excessive de contours de texte peut rendre votre page web difficile à lire. Il est important de l’utiliser avec modération et de choisir des couleurs et des styles qui s’harmonisent avec le design global de votre site.
