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

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

Asosiy misol

Oddiy matn chet chizig'i:

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

css.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:

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

css.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:

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

css.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:

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

css.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:

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

css.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