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

FPS Sayacı

requestAnimationFrame ile tarayıcı FPS değerini ölçün: yumuşatma, en düşük ve en yüksek kare hızı, uyarı eşiği ve isteğe bağlı grafik. Yerel çalışır, yükleme ve API yoktur.

Dosya Boyutu Dönüştürücü

Bayt, KB, MB, GB, TB ve ikili IEC birimleri (KiB, MiB, GiB, TiB) arasında, ondalık ve ikiliyi dilediğiniz gibi birleştirerek dönüşüm yapın.

Webpack Yapılandırma Oluşturucu

Kısa bir formdan webpack 5 için bir webpack.config.js oluşturun: entry, çıkış klasörü ve modu ayarlayın; ardından TypeScript, Babel, bir CSS yükleyici, HtmlWebpackPlugin ve bir dev sunucu açın.

Telefon numarası doğrulayıcı

Telefon numarasının ülkeye göre yapısını denetleyin; bölge, tür, E.164, uluslararası, ulusal ve RFC 3966 biçimlerini görün.

Kurgusal telefon numarası oluşturucu

Beş ülkede resmen ayrılmış aralıklardan 50 adede kadar kurgusal numara üretin.

Rastgele adres oluşturucu

Arayüz maketleri ve testler için üç basitleştirilmiş biçimde 1–20 adres benzeri kayıt oluşturun.

Araç diğer dillerde mevcuttur