Propriété text-stroke

La propriété text-stroke définit la couleur et l'épaisseur du contour des caractères de texte ou son contour. En tant que valeur, la propriété doit recevoir l'épaisseur du contour et, séparés par un espace, la couleur du contour.

Syntaxe

sélecteur {
	text-stroke: épaisseur_du_contour et sa_couleur;
}

Exemple de base

Contour de texte simple :

<div class="stroked-text">
	Lorem ipsum dolor sit amet
</div>

.stroked-text {
	font-size: 48px;
	font-weight: bold;
	-webkit-text-stroke: 2px red;
	text-stroke: 2px red;
}

Contour uniquement

Maintenant, faisons en sorte que la couleur du texte corresponde à la couleur de fond (dans notre cas, blanc). Il ne restera que le contour :

<div class="stroked-text">
	Lorem ipsum dolor sit amet
</div>

.stroked-text {
	font-size: 48px;
	font-weight: bold;
	color: white;
	-webkit-text-stroke: 2px black;
	text-stroke: 2px black;
}

Contour avec dégradé

Créons un contour dégradé à l'aide de la propriété background-clip :

<div class="gradient-stroke">
	Lorem ipsum dolor sit amet
</div>

.gradient-stroke {
	font-size: 42px;
	font-weight: bold;
	background: linear-gradient(to right, #ff8a00, #e52e71);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-stroke: 1px #333;
	text-stroke: 1px #333;
}

Contour multiple

Effet de double contour à l'aide de text-shadow :

<div class="double-stroke">
	Lorem ipsum dolor sit amet
</div>

.double-stroke {
	font-size: 40px;
	color: white;
	-webkit-text-stroke: 3px #000;
	text-stroke: 3px #000;
	text-shadow: 
		0 0 5px #000,
		0 0 10px #000;
}

Contour animé

Ajoutons une animation de changement de contour :

<div class="animated-stroke">
	Lorem ipsum dolor sit amet
</div>

.animated-stroke {
	font-size: 38px;
	color: white;
	-webkit-text-stroke: 1px #ff0000;
	text-stroke: 1px #ff0000;
	animation: pulse 2s infinite;
}

@keyframes pulse {
	0% { -webkit-text-stroke: 1px #ff0000; text-stroke: 1px #ff0000; }
	50% { -webkit-text-stroke: 3px #ff0000; text-stroke: 3px #ff0000; }
	100% { -webkit-text-stroke: 1px #ff0000; text-stroke: 1px #ff0000; }
}

Voir aussi

la propriété text-fill-color,
qui définit la couleur de remplissage des caractères de texte
la propriété text-stroke-color,
qui définit la couleur du contour du texte
la propriété text-stroke-width,
qui définit l'épaisseur du contour du texte