CSS ile Yazılara Kontur Ekleme

Doğru kelime kontur'mu bilmiyorum ancak border gibi düşünebilirsiniz. Nasıl bir divin dört köşesine de istediğimiz renkte kalınlıkta kenarlık ekleyebiliyorsak, bunu yazılarımıza da yapmanın bir yolu var.

text-stroke-width ve text-stroke-color özelliklerini kullanarak yapıyoruz. Ayrıca kısa yol olarak text-stroke özelliğini kullanabilirsiniz. Standart bir özellik olmadığı için -webkit- ön eki ile kullanılmaktadır.

Kısaca örnek vermek gerekirse;

h3 {
    color: blue;
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: green;
}

Ya da kısa kullanıma örnek verecek olursak;

h3 {
    color: transparent;
    -webkit-text-stroke: 3px green;
}

Ayrıca yazıyı seçtiğinizde de stili değiştirebilirsiniz, örneğin;

h3::selection {
    -webkit-text-stroke: 5px blue;
}

PROTOTURK

Son olarak yazıya gradient vererek yine bu özelliği de birlikte kullanabilirsiniz. Şöyle ki;

h3 {
    color: transparent;
    background: linear-gradient(lime, darkorange);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 3px green;
}

Sonucunda ise şöyle bir çıtkı alırsınız;

PROTOTURK

Tarayıcı Desteği

Internet Explorer hariç diğer tarayıcılarda sorunsuz çalışıyor, daha detaylı kontrol için https://caniuse.com/#feat=mdn-css_properties_-webkit-text-stroke adresine gözatabilirsiniz.