Eigenschap text-stroke

De eigenschap text-stroke stelt de kleur en dikte in van de omtrek van tekstkarakters of de omlijning ervan. Als waarde moet je in de eigenschap de dikte van de omlijning en, gescheiden door een spatie, de kleur van de omlijning opgeven.

Syntaxis

selector {
	text-stroke: omlijningsdikte en kleur;
}

Basisvoorbeeld

Eenvoudige tekstomlijning:

<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;
}

Alleen omlijning

Laten we nu de tekstkleur hetzelfde maken als de achtergrondkleur (in ons geval wit). Als resultaat blijft alleen de omlijning over:

<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;
}

Omlijning met verloop

Laten we een verloopomlijning maken met behulp van de eigenschap 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;
}

Meervoudige omlijning

Dubbele omlijningseffect met behulp van 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;
}

Geanimeerde omlijning

Laten we een animatie toevoegen die de omlijning wijzigt:

<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; }
}

Zie ook

de eigenschap text-fill-color,
die de opvulkleur voor tekstkarakters instelt
de eigenschap text-stroke-color,
die de kleur van de tekstomlijning instelt
de eigenschap text-stroke-width,
die de dikte van de tekstomlijning instelt