Metin Gölgesi Oluşturucu
CSS text-shadow özelliklerini görsel olarak oluşturun ve önizleyin.
Metin Ayarları
Önizleme metninin stilini yapılandırın
Gölge Ayarları
Her gölgenin özelliklerini ayarlayın
Gölge 1
Hazır Ayarlar
Önceden tanımlanmış metin gölgesi stillerini deneyin
Önizleme
Oluşturulan metin gölgesi efektlerini kontrol edin
Sample Text
Oluşturulan CSS
text-shadow: 2px 2px 4px #00000080;Tam Metin Gölgesi Kılavuzu
Metin Gölgesi Özelliklerini Anlama
Özellik Değeri Açıklamaları
- • X 오프셋: X Ofseti: Gölgenin yatay konumu (pozitif: sağ, negatif: sol)
- • Y 오프셋: Y Ofseti: Gölgenin dikey konumu (pozitif: aşağı, negatif: yukarı)
- • 블러: Bulanıklık: Gölgenin bulanıklık derecesi (0: keskin, daha yüksek: daha bulanık)
- • 색상: Renk: Gölge rengi (HEX, RGB, RGBA vb.)
Sözdizimi Yapısı
text-shadow: x y blur color;
text-shadow: 2px 2px 4px #000000;
Tasarım Teknikleri
Derinlik Oluşturma
- • Küçük ofset + küçük bulanıklık: İnce derinlik
- • Büyük ofset + büyük bulanıklık: Güçlü boyutluluk
- • Koyu renkler: Doğal gölge efektleri
- • Yarı saydam renkler: Yumuşak gölge gösterimi
Özel Efektler
- • 0 0 bulanıklık rengi: Parlaklık (ışıklı) efekti
- • Çoklu gölge kombinasyonları: Karmaşık efektler
- • Kontrast renkler: Neon tabela efekti
- • Negatif ofsetler: Ters ışık efekti
Pratik Kullanım Durumları
- • Başlıklar: Güçlü etki için gölgeler bırakın
- • Düğme metni: Okunabilirliği artırmak için ince gölgeler
- • Logolar: Marka kimliğini geliştirmek için özel efektler
- • Bannerlar: Görsel dikkati artırmak için parlaklık efektleri
- • Navigasyon: Mevcut sayfa göstergesi için vurgular
Erişilebilirlik Hususları
- • Metin ve arka plan arasında yeterli kontrast oranını koruyun (WCAG standartları)
- • Gölgelerden kaynaklanan okunabilirlik bozulmasını önleyin
- • Bilgi iletimi için yalnızca renge güvenmeyin
- • Yüksek kontrast modunda görüntüleme durumunu kontrol edin
- • Animasyonlu gölgeler için erişilebilirlik ayarlarını göz önünde bulundurun
Performans Optimizasyonu
- • Aşırı bulanıklık değerleri render performansını etkileyebilir
- • Birden fazla gölge katmanını dikkatli kullanın
- • Animasyonlar için GPU hızlandırmasını kullanın
- • Mobil ortamlarda performans testi yapın