En matière de conception de sites web, l’attrait visuel de votre contenu joue un rôle essentiel pour capter et retenir l’attention de votre public. L’un des aspects de la conception qui peut avoir un impact significatif sur l’esthétique générale et la lisibilité de votre site web est le style du texte.
La stylisation du texte ne se limite pas au choix d’une police et d’une couleur de police. Il s’agit de combiner soigneusement diverses propriétés CSS pour obtenir l’effet désiré, par exemple en utilisant des contours de texte pour rendre votre texte visuellement percutant.
Dans cet article, nous allons nous pencher sur l’art de styliser le contour des textes à l’aide de CSS et explorer son fonctionnement ainsi que les différentes options que vous pouvez utiliser.
Comprendre les textes web
Un texte web est un texte affiché sur une page web. Les polices de caractères jouent un rôle essentiel dans l’affichage du texte sur le web. Ces polices sont essentiellement des graphiques vectoriels, ce qui signifie que les données en pixels ne les limitent pas et qu’elles peuvent être affichées à différentes tailles tout en conservant leur netteté et leur clarté.
L’un des aspects fascinants des polices en tant que graphiques vectoriels est la possibilité d’appliquer des traits ou des contours autour des caractères individuels. Tout comme vous pouvez dessiner un trait autour d’une forme dans des programmes vectoriels tels qu’Adobe Illustrator, CSS vous permet d’obtenir le même effet sur un texte web.
2 méthodes pour ajouter un contour au texte avec CSS
Pour ajouter un effet de contour à votre texte à l’aide de CSS, il existe deux méthodes. Explorons les inconvénients de ces méthodes et voyons comment les utiliser.
1. Utilisation de la propriété text-stroke
La propriété text-stroke est une propriété CSS que vous pouvez utiliser pour ajouter un contour à vos textes. Elle vous permet de spécifier les contours width et color. Cette propriété n’est prise en charge que par les navigateurs basés sur WebKit, et pour l’utiliser, vous devez ajouter le préfixe -webkit-.
Par exemple, ajoutons un contour à un texte d’en-tête h1 – « Welcome to Kinsta » :
<h1>Welcome to Kinsta</h1>Voici comment la propriété text-stroke sera utilisée avec le préfixe -webkit-:
h1 {
-webkit-text-stroke-width: 3px;
-webkit-text-stroke-color: black;
}-webkit-text-stroke-width et -webkit-text-stroke-color spécifient respectivement les sites width et color. La propriété width est remplacée par 3px et color par black.
Les deux propriétés ci-dessus peuvent être combinées avec la propriété abrégée -webkit-text-stroke, qui spécifie simultanément les traits color et width.
h1 {
-webkit-text-stroke: 3px black;
}Vous obtiendrez le même résultat.
Prise en charge de la propriété text-stroke
Selon caniuse, la propriété text-stroke n’est pas prise en charge par le navigateur Internet Explorer.
Si vous utilisez la propriété text-stroke pour définir le contour de vos textes et qu’un utilisateur utilise un navigateur non pris en charge, il se peut que ce texte ne soit pas visible si sa couleur correspond à la couleur d’arrière-plan.
Pour remédier à ce problème, vous pouvez utiliser la propriété -webkit-text-fill-color pour définir color pour le texte et définir une couleur de repli avec la propriété color:
h1 {
color: black;
-webkit-text-fill-color: white; /* Will override color (regardless of order) */
-webkit-text-stroke: 3px black;
}Lorsqu’un navigateur ne prend pas en charge la propriété text-stroke, il utilise la couleur définie par la propriété color.
Une autre option consiste à confirmer que le navigateur prend en charge la propriété -webkit-text-stroke avant d’ajouter le style.
@supports (-webkit-text-stroke: 3px black) {
h1 {
-webkit-text-fill-color: white;
-webkit-text-stroke: 3px black;
}
}2. Utilisation de la propriété text-shadow
Si vous ne souhaitez pas gérer les différences de prise en charge, vous pouvez utiliser la propriété text-shadow, qui prend en charge toutes les dernières versions des navigateurs les plus répandus.
Pour la propriété text-shadow, nous utiliserons quatre ombres, chacune en haut à droite, en haut à gauche, en bas à gauche et en bas à droite.
h1 {
color: #fff;
text-shadow:
3px 3px 0 #000,
-3px 3px 0 #000,
-3px -3px 0 #000,
3px -3px 0 #000;
}Dans cet exemple, nous utilisons quatre ombres pour créer un effet de contour de texte. Chaque ombre a un décalage de 3 pixels par rapport au texte et la couleur est définie sur noir (#000). Cet effet est similaire à celui généré par la première méthode.
En appliquant des ombres aux quatre coins du texte, nous obtenons un contour bien défini. N’hésitez pas à ajuster les décalages de pixels, les couleurs de l’ombre ou les couleurs du texte en fonction de vos préférences en matière de conception.
Cette méthode vous offre un avantage supplémentaire car vous pouvez ajuster les ombres horizontales et verticales en fonction de ce qui convient au texte. Vous pouvez également ajouter un rayon de flou :
h1 {
color: #fff;
text-shadow:
3px 3px 2px #000,
-3px 3px 2px #000,
-3px -3px 0 #000,
3px -3px 0 #000;
}
L’une des limites de l’utilisation des ombres de texte est que vous pouvez rencontrer un effet de trait discontinu lorsque la longueur de l’ombre dépasse 1 pixel (vous le verrez si vous comparez avec la méthode text-stroke ).
Combinaison des propriétés text-stroke et text-shadow
Vous pouvez combiner les deux propriétés pour obtenir un effet visuellement époustouflant qui associe un contour de texte parfait à un flou subtil et à des effets supplémentaires offerts par la propriété text-shadow. Cette combinaison permet une approche polyvalente et personnalisable de l’amélioration de l’apparence de votre texte.
h1 {
-webkit-text-stroke: 1px black;
color: white;
text-shadow:
3px 3px 0 #000,
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
Vous pouvez également vous dispenser d’ajouter des ombres individuelles à chaque coin et appliquer une ombre générale à l’aide d’une seule ligne :
#heading-1{
color: white;
-webkit-text-stroke: 1px #F8F8F8;
text-shadow: 0px 1px 4px #23430C;
}
#heading-2{
color: white;
-webkit-text-stroke: 1px #F8F8F8;
text-shadow: 0px 2px 4px red;
}
#heading-3{
color: #333;
-webkit-text-stroke: 1px #282828;
text-shadow: 0px 4px 4px #282828;
}
Résumé
Les propriétés text-stroke et text-shadow offrent toutes deux des options intéressantes pour ajouter des contours à votre texte. Le choix de l’une ou l’autre dépend de la compatibilité avec le navigateur, des effets souhaités et du niveau de contrôle dont vous avez besoin pour votre conception.
Expérimentez différentes techniques et trouvez la meilleure approche pour créer des contours de texte captivants et visuellement attrayants. Vous pouvez combiner les capacités d’hébergement de Kinsta avec votre projet complet pour une présence en ligne attrayante.
Partagez votre expérience ! Avez-vous utilisé d’autres approches que celles décrites dans cet article ? Faites-le nous savoir dans les commentaires.
Joel est un développeur d'interfaces publiques qui travaille chez Kinsta en tant que rédacteur technique. Il est un enseignant passionné par l'open source et a écrit plus de 200 articles techniques, principalement autour de JavaScript et de ses frameworks.
Laisser un commentaire