CSS Metin Kenarlığı (text-stroke) Oluşturucu

Bu araç ne işe yarar?

CSS Text Stroke Generator, -webkit-text-stroke ile metne kontur (dış çizgi) eklemenizi sağlar; kontur genişliği, kontur rengi ve dolgu rengini ayarlayıp hazır CSS'i kopyalarsınız. Vurgulu başlıklar, içi boş yazılar ve dikkat çekici tipografi efektleri oluşturmak için kullanılır. Tasarımcılar ve frontend geliştiriciler için hızlı bir efekt aracıdır.

Nasıl kullanılır?

Değerleri ve seçenekleri ayarlayın.
Canlı önizlemede sonucu görün.
Üretilen CSS/kodu projenize kopyalayın.

Nasıl çalışır?

Araç, seçtiğiniz genişliği ve kontur rengini -webkit-text-stroke: 2px #000000 gibi bir kurala, dolgu rengini ise color veya -webkit-text-fill-color özelliğine dönüştürür. İçi boş (sadece çizgili) bir görünüm için dolgu rengini transparent yapabilirsiniz. Çıktı doğrudan stil sayfanıza yapıştırabileceğiniz hazır CSS olarak verilir.

Yaygın kullanım alanları

Hero başlıklarına çarpıcı bir kontur eklemek, arka plan görselleri üzerinde okunabilirliği artırmak için metni çizgiyle çevrelemek ve içi boş tipografi tasarımları yapmak için idealdir. Logo metinleri ve afiş tarzı başlıklarda da sıkça tercih edilir.

Sıkça sorulan sorular

-webkit-text-stroke tüm tarayıcılarda çalışır mı?

Önekli olmasına rağmen Chrome, Edge, Safari ve Firefox dahil modern tarayıcıların büyük çoğunluğu bunu destekler. Yine de kritik metinlerde, kontur desteklenmezse okunabilirliğin korunması için uygun bir dolgu rengi bırakmanız önerilir.

Metni içi boş gösterip yalnızca konturu nasıl bırakırım?

Dolgu rengini transparent olarak ayarlayın; bu durumda yalnızca kontur çizgisi görünür ve harflerin içi şeffaf kalır. Kontrastı korumak için yeterli kontur genişliği seçmeyi unutmayın.