CSS Text Shadow Oluşturucu
Ücretsiz çevrimiçi text-shadow oluşturucu. Ofset, bulanıklık, renk ve opaklıkla birden fazla gölge katmanı üst üste dizin, Neon, 3D, Retro hazır ayarlarını deneyin ve CSS'i anında kopyalayın.
CSS'teki text-shadow özelliği nedir?
text-shadow, metin gliflerine gölge efektleri ekler. Her gölge yatay ofset, dikey ofset, isteğe bağlı bulanıklık yarıçapı ve renkle tanımlanır ve birden fazla gölge tek bir virgülle ayrılmış değerde birleştirilip zengin efektler oluşturabilir.
Birden fazla gölge katmanı nasıl çalışır?
Katmanlar bildirim sırasına göre alttan üste çizilir, yani listedeki ilk gölge en üstte görünür. Bu oluşturucu katman ekleme, silme, etkinleştirme ve devre dışı bırakma sağlar; her katmanın kendi ofseti, bulanıklığı, rengi ve opaklığı vardır, böylece Neon veya 3D gibi efektlar üst üste dizilir.
Ofset X, ofset Y ve bulanıklık ne anlama gelir?
Ofset X gölgeyi gliflerin soluna veya sağına, ofset Y yukarı veya aşağı taşır; bulanıklık yarıçapı kenarlarını yumuşatır: 0, Retro veya Dış çizgi stillerindeki gibi sert bir kenar verirken büyük değerler rengi bir parıltı gibi yayar.
Neon parıltı efekti nasıl yapılır?
Neon hazır ayarını kullanın veya ofseti sıfır, aynı parlak renkte ve artan bulanıklık değerlerine sahip birden çok katman ayarlayın; örneğin 0 0 3px, 0 0 8px ve 0 0 20px. Üst üste binen haleler neon tüpün ışığını taklit eder.
text-shadow görüntüleme performansını etkiler mi?
Birkaç statik katman ucuzdur ama çok sayıda geniş bulanıklıklı gölgesi olan metni yeniden boyamak daha maliyetlidir. Uzun paragraflara ağır gölge uygulamak veya text-shadow'u sürekli animasyonla değiştirmek, düşük donanımlı ve mobil cihazlarda kare düşüşüne yol açabilir; kısa başlıklar, ölçülü bulanıklık tercih edin veya opaklığı animasyonla değiştirin.
Gölgeyi yarı saydam nasıl yaparım?
Her katmanın, seçilen rengi rgba gösterimine çeviren bir opaklık kaydırıcısı vardır; örneğin rgba(0, 0, 0, 0.5). Yarı saydam gölgeler her arka planla doğal biçimde kaynaşır; Kâğıt hazır ayarı yumuşak kabartma görünümü için bunu kullanır.
text-shadow ile box-shadow arasındaki fark nedir?
text-shadow metnin glif biçimine uygulanır ve yayılma ya da iç gölge değerleri yoktur; box-shadow ise herhangi bir öğenin dikdörtgen kutusunu çevreler. Ofset ve bulanıklık sözdizimi ortaktır ama biri diğerinin yerine geçmez.
Hangi tarayıcılar text-shadow destekliyor?
text-shadow; Chrome, Firefox, Safari, Edge ve Opera dahil tüm modern tarayıcılarda desteklenir ve on yılı aşkın süredir öneksiz ve kararlıdır. Çok katmanlı gölgeler her yerde aynı çalışır.
Yazdıklarım bir sunucuya gönderiliyor mu?
Hayır. Önizleme metni ve yapılandırdığınız tüm katmanlar tarayıcınızda kalır, CSS sayfada yerel olarak üretilir. Ağ üzerinden hiçbir şey gönderilmez; araç yüklendikten sonra çevrimdışı da çalışır.
CSS Text Shadow Oluşturucu Nasıl Kullanılır
Tek bir ofset tahmin etmek yerine katmanları üst üste dizerek CSS metin gölgeleri tasarlayın. Her değişiklik büyük canlı önizleme metninde işlenir ve CSS tarayıcınızda yerelde üretilir.
- Etkiyi gerçek metin üzerinde denemek için Önizleme metni alanına kendi sözlerinizi yazın.
- Bir hazır ayar deneyin: Neon, Kâğıt, 3D, Retro, Parıltı veya Dış hat hazır katmanları yükler.
- Her katmanın Ofset X, Ofset Y, Bulanıklık, Renk ve Opaklık değerlerini kaydırıcılarıyla ayarlayın.
- Daha fazla gölge dizmek için Katman ekle'yi kullanın, bir katmanı devre dışı bırakmak için işaretini kaldırın ya da çöp kutusu simgesiyle silin.
- Üretilen text-shadow kuralını kopyalayın ve stil sayfanıza yapıştırın.
Neon parıltısı, aynı renkten üç veya dört katman ve artan bulanıklıkla en iyi görünür — ofsetleri sıfırda tutun ve işi bulanıklığa yaptırın.
İlgili Araçlar
- CSS Box Shadow Oluşturucu Ücretsiz çevrimiçi CSS box shadow oluşturucu. Ayarlanabilir ofset, bulanıklık, yayılma, renk ve inset ile görsel olarak güzel gölgeler oluşturun. Canlı önizleme ve anında kod kopyalama.
- CSS Gradyan Oluşturucu Görsel olarak muhteşem CSS gradyanları oluşturun. Birden fazla renk durağı, açılar ve konumlarla doğrusal, radyal ve konik gradyanlar oluşturun. Üretime hazır CSS kodunu anında kopyalayın.
- Şık Yazı Oluşturucu 28 Unicode stili olan ücretsiz şık yazı oluşturucu. Instagram biyoları, TikTok, WhatsApp ve oyun adları için kalın, eğik, gotik ve daire içi yazılar oluştur - tek tıkla kopyala.
- Border Radius Oluşturucu Ücretsiz çevrimiçi yaratıcı border radius oluşturucu. 8 kulbu sürükleyin veya bir blob hazır şekli seçin, organik CSS biçimleri oluşturun ve kodu anında kopyalayın.
- Renk Dönüştürücü Ücretsiz çevrimiçi renk dönüştürücü. HEX, RGB, HSL, HSV formatlarını görsel seçici ile anında dönüştürün. %100 gizli, tarayıcınızda çalışır.
- CSS Easing Oluşturucu Ücretsiz çevrimiçi CSS easing oluşturucu. Etkileşimli eğri üzerinde cubic-bezier kontrol noktalarını sürükleyin, 18 hazır ayardan birini seçin, döngüde oluşan top animasyonunu izleyin ve zamanlama fonksiyonunu anında kopyalayın.
- CSS Clip Path Oluşturucu Ücretsiz çevrimiçi CSS clip-path oluşturucu. Sürüklenebilir noktalarla polygon, circle, ellipse ve inset şekilleri tasarlayın, canlı önizleyin ve tek tıkla CSS kodunu kopyalayın.
- CSS Güzelleştirici CSS kodunu anında biçimlendirin ve güzelleştirin. Özelleştirilebilir seçeneklerle sıkıştırılmış CSS'i okunabilir koda dönüştürün.