Eienskap text-stroke

Die eienskap text-stroke stel die kleur en dikte van die omtrek van tekskarakters of sy omskrywing. As waarde moet die eienskap die dikte van die omskrywing en dan deur 'n spasie die kleur van die omskrywing kry.

Sintaksis

selekteerder {
	text-stroke: dikte van omskrywing en sy kleur;
}

Basiese Voorbeeld

Eenvoudige omskrywing van teks:

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

Slegs Omskrywing

Laat ons nou die tekskleur laat ooreenstem met die agtergrondkleur (in ons geval wit). As gevolg sal net die omskrywing oorbly:

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

Omskrywing met Gradiënt

Laat ons 'n gradiënt-omskrywing skep met behulp van die eienskap 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;
}

Veelvuldige Omskrywing

Effek van dubbele omskrywing 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 Omskrywing

Laat ons animasie byvoeg wat die omskrywing verander:

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

Sien Ook

die eienskap text-fill-color,
wat die vulkleur van tekskarakters stel
die eienskap text-stroke-color,
wat die kleur van die teksomskrywing stel
die eienskap text-stroke-width,
wat die dikte van die teksomskrywing stel