Text-stroke xususiyati

text-stroke xususiyati matn belgilarining konturining qalinligi va rangini yoki uning chet chizig'ini belgilaydi. Xususiyatga qiymat sifatida chet chizig'ining qalinligi va undan keyin bo'shliq bilan chet chizig'ining rangi berilishi kerak.

Sintaksis

selector {
	text-stroke: chet-chizig'i-qalinligi va uning rangi;
}

Asosiy misol

Oddiy matn chet chizig'i:

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

Faqat chet chizig'i

Endi matn rangini fon rangi bilan bir xil qilaylik (bizning holatda oq). Natijada faqat chet chizig'i qoladi:

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

Gradient chet chizig'i

background-clip xususiyati yordamida gradient chet chizig'ini yaratamiz:

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

Ko'p qatlamli chet chizig'i

text-shadow yordamida qo'shma chet chizig'i effekti:

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

Animatsiyalangan chet chizig'i

Chet chizig'ining o'zgarish animatsiyasini qo'shamiz:

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

Shuningdek qarang

text-fill-color xususiyati,
bu matn belgilarining to'ldirish rangini belgilaydi
text-stroke-color xususiyati,
bu matn chet chizig'ining rangini belgilaydi
text-stroke-width xususiyati,
bu matn chet chizig'ining qalinligini belgilaydi