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

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

Temel Örnek

Basit bir metin dış çizgisi:

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

Результат:

Sadece Dış Çizgi

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

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

Результат:

Gradyan Dış Çizgi

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

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

Результат:

Çoklu Dış Çizgi

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

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

Результат:

Animasyonlu Dış Çizgi

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

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

Результат:

Ayrıca Bakınız