Softonic

CSS Metin Gölgesi Oluşturucu

Adım 1 / 2
CSS oluştur

DevTools'ta bir text-shadow bildirimini gözle ayarlamak işe yarar, ama yumuşak bir neumorfik parıltı, retro iki katmanlı bir gölge ya da büyük bir başlıkta net bir 1px kontur gerektiği anda tahmin işine döner. Bu oluşturucu X kaydırmasını, Y kaydırmasını, bulanıklık yarıçapını ve bir RGBA rengini ayarlamanızı ve yapıştırmaya hazır bir CSS satırı kopyalamanızı sağlar.

Bir text-shadow nasıl kurulur

  1. 1

    Kaydırmaları ayarlayın

    X piksel cinsinden yatay kaydırma, Y dikeydir. Pozitif Y gölgeyi aşağı iter, negatif Y yukarı iter.

  2. 2

    Bulanıklık yarıçapını seçin

    Bulanıklık 0 sert bir siluet verir; daha yüksek değerler gölgeyi soldurur. Tipik yumuşak gölgeler 4-12px bulanıklık kullanır.

  3. 3

    Bir renk seçin

    Opaklığı ayarlayabilmek için bir RGBA dizesi kullanın. `rgba(0,0,0,0.35)` açık arka planlarda ince derinlik için güvenli bir varsayılandır.

  4. 4

    Bildirimi kopyalayın

    Araç `text-shadow: Xpx Ypx Blurpx color;` çıktısı verir: onu stil sayfanızdaki eşleşen seçiciye bırakın.

Gerçekten iyi görünen metin gölgesi tarifleri

Bir metin gölgesi dört sayı ve bir rengin toplamıdır. Bunu hatırlayın, bir dergideki ya da açılış sayfasındaki neredeyse her efekti yeniden yaratabilirsiniz.

Kopya kâğıdı

Efekt Bildirim
İnce derinlik text-shadow: 0 1px 2px rgba(0,0,0,0.25);
Yumuşak gölge text-shadow: 0 4px 12px rgba(0,0,0,0.35);
1px kontur text-shadow: -1px 0 #000, 1px 0 #000, 0 -1px #000, 0 1px #000;
Retro çift text-shadow: 2px 2px 0 #f87171, 4px 4px 0 #111827;
Neon parıltı text-shadow: 0 0 4px #22d3ee, 0 0 12px #22d3ee, 0 0 24px #0ea5e9;

Birden fazla gölgeyi katmanlama

text-shadow virgülle ayrılmış bir liste kabul eder. Tarayıcı, ressam algoritmasına göre koddaki sıraya göre çizer, listedeki son gölge her şeyin arkasında kalır. Bunu konturları taklit etmek için (dört yönde dört sert 1px gölge) ya da keskin bir yakın gölgeyle dağınık bir uzak gölgeyi üst üste koyarak derinlik oluşturmak için kullanın.

text-shadow ne zaman kullanılmamalı

  • Çok küçük gövde metninde, 2px üzerindeki bulanıklık glifleri bulaşık gösterir. -webkit-font-smoothing ve daha güçlü kontrast tercih edin.
  • Performans açısından kritik hero animasyonlarında üçten fazla yığılmış gölgeden kaçının; her katman tarayıcıyı metni yeniden rasterize etmeye zorlar.
  • Karmaşık bir yolda (eğriler, dönüşler) dar kaydırmalı bir gölge gerekiyorsa, bunun yerine feDropShadow’lu bir SVG <filter> düşünün, glif konturunu daha doğru izler.

Sık Sorulan Sorular

Çıktı tasarım gereği tek bir gölge katmanıdır. Efektleri katmanlamak için oluşturucuyu birkaç kez çalıştırın ve sonuçları virgülle zincirleyin, örneğin text-shadow: 1px 1px 0 #000, 0 4px 8px rgba(0,0,0,0.3);.

text-shadow render edilen metnin glif konturlarını izler. box-shadow öğenin dikdörtgen kenarlık kutusunu izler. Benzer parametreler alırlar ama tamamen farklı şekillere göre rasterize ederler.

Tarayıcılar metin gölgelerini cihaz piksel ızgarasına göre rasterize eder. 2x bir ekranda bulanıklık 0 olan bir gölge alt piksel konumlarında render edilir ve biraz yumuşak görünebilir. Bulanıklığı 1'e çıkarmak görsel ağırlığı değiştirmeden genellikle bunu temizler.

Girdiğiniz değerler bildirimi oluşturmak için sunucumuza gönderilir; ancak saklanmaz veya yeniden kullanılmaz. Çok adımlı görünümde değerler adımlar arasında bağlantı üzerinden taşınır; tek sayfalık görünümde hiçbir şey saklanmaz, sayfayı yenileyin, her şey gider.

İlgili Araçlar

ASCII Tablosu Referansı

NUL, LF ve DEL dahil her kod için ondalık, onaltılık, sekizlik ve ikili değerlerle HTML sayısal karakter başvurusu gösterimini sunan tam ASCII tablosu.

HTML Karakter Referansı

HTML varlıklarının aranabilir listesi; adlandırılmış ve sayısal kodlarıyla birlikte özel karakter ve semboller için tek tıkla kopyalama.

Klavye kısayolları başvurusu

macOS, Windows ve Linux’ta VS Code, Chrome ve GNU Readline kullanan Bash için belgelenmiş varsayılan kısayolları arayın.

EditorConfig Oluşturucu

Girinti stili ve boyutu, satır sonu, karakter kümesi ve boşluk kurallarınızla bir .editorconfig dosyası oluşturarak IDE ve editörler arasında tutarlı biçimlendirme sağlayın.

E-posta Doğrulayıcı

Bir e-posta adresini doğrulayın: RFC 5322 sözdizimi kontrolü, canlı MX kaydı sorgulama, ayrıca yerel kısım, alan adı ve uzunluk bilgileri. Hiçbir e-posta gönderilmez.

Gradyan Duvar Kağıdı Oluşturucu

Dizüstü bilgisayar, telefon veya Zoom arka planları için bulanık üç renkli gradyan duvar kağıtları oluşturun. Açıyı ve bulanıklığı rastgele belirleyin ya da elle ayarlayın.

Araç diğer dillerde mevcuttur