text-stroke Özelliği

text-stroke özelliği, metin karakterlerinin dış çizgisinin rengini ve kalınlığını veya onun konturlu görünümünü belirler. Özelliğe değer olarak, dış çizginin kalınlığı ve bir boşlukla ayrılmış olarak dış çizginin rengi verilmelidir.

Sözdizimi

seçici {
	text-stroke: dış çizgi kalınlığı ve rengi;
}

Temel Örnek

Basit bir metin dış çizgisi:

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

Sadece Dış Çizgi

Şimdi metin rengini arka plan rengiyle (bizim durumumuzda beyaz) aynı yapalım. Sonuç olarak sadece dış çizgi kalacaktır:

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

Gradyan Dış Çizgi

background-clip özelliği kullanılarak gradyanlı bir dış çizgi yapalım:

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

Çoklu Dış Çizgi

text-shadow kullanılarak çift dış çizgi efekti:

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

Animasyonlu Dış Çizgi

Dış çizginin değişim animasyonu ekleyelim:

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

Ayrıca Bakınız

metin karakterlerinin dolgu rengini belirleyen text-fill-color özelliği,
metin dış çizgisinin rengini belirleyen text-stroke-color özelliği,
metin dış çizgisinin kalınlığını belirleyen text-stroke-width özelliği