Kavram ve Bilgi Merkezi
CSS Box-Shadow Üretici, Derinlik ve Katman Tasarımı
CSS Box-Shadow Üretici, Derinlik ve Katman Tasarımı
Bu araç %100 istemci taraflı (Client-Side) çalışır. Kodlarınız, tokenlarınız, API anahtarlarınız veya verileriniz asla uzak bir sunucuya yüklenmez; tüm işlemler güvenle tarayıcınızın izole sanal alanında (sandbox) gerçekleşir.
Temel Mimari ve Matematiksel Formüller
box-shadow: [X-Offset] [Y-Offset] [Blur-Radius] [Spread-Radius] [Color] [Inset]
box-shadow: [inset] offset-x offset-y blur-radius spread-radius color.
En İyi Uygulamalar ve Temel Yönergeler
- Doğal Gölgeler İçin Çok Katmanlı (Layered) Gölgeler Kullanın: Tek bir sert gölge yerine farklı opaklık ve bulanıklıkta 2-3 katmanlı gölge tanımlamak tasarıma gerçekçi bir derinlik katar.
- Siyah (#000) Yerine Koyu Arka Plan Rengi Tonları Seçin: Gölge rengini arka planın veya nesnenin kendi renginin daha koyu ve doygun bir tonu olarak seçmek gerçekçi ışık kırılması hissi verir.
- Aşırı Bulanıklıkta GPU Performansını Gözetin: Yüzlerce elemente yüksek blur değerli gölgeler vermek düşük donanımlı mobil cihazlarda sayfa kaydırma performansını düşürebilir.
Sıkça Sorulan Sorular (SSS)
Spread Radius ile Blur Radius farkı nedir?
Blur radius gölgenin kenarlarının ne kadar yumuşatılacağını belirler. Spread radius ise gölgenin her yöne doğru fiziksel boyutunu genişletir veya daraltır.
İç gölge (inset) nasıl oluşturulur?
Kuralın başına veya sonuna
inset anahtar kelimesi eklendiğinde gölge kutunun dışına değil, iç kenarlarına doğru çizilir.Üretilen CSS kodu tüm tarayıcılarda çalışır mı?
Evet. Standart CSS3
box-shadow özelliği modern tüm tarayıcılar tarafından eksiksiz desteklenir; artık eski -webkit öneklerine ihtiyaç yoktur.