box-shadow Nedir?
box-shadow, bir öğeye gölge ekleyen CSS özelliğidir. Doğru kullanılan gölge, arayüzde derinlik ve hiyerarşi yaratır: kartlar zeminden ayrılır, butonlar tıklanabilir görünür, açılır menüler öne çıkar. Bu araç gölgenin beş parametresini görsel olarak ayarlamanızı, sonucu canlı önizlemede görmenizi ve kodu tek tıkla kopyalamanızı sağlar.
Parametreler
- Yatay/Dikey kayma: Gölgenin öğeye göre konumu. Genellikle küçük bir dikey kayma (örn. 8px) doğal bir "yukarıdan ışık" hissi verir.
- Bulanıklık: Gölgenin yumuşaklığı. Yüksek değer daha yumuşak, dağınık; düşük değer daha keskin gölge üretir.
- Yayılma: Gölgenin büyüklüğü. Negatif değer gölgeyi küçültür ve daha zarif gösterir.
- Renk & saydamlık: Gölge rengi ve opaklığı; saydamlık rgba() olarak koda yansır. Düşük opaklık (örn. %15) gerçekçi durur.
- İç gölge (inset): Gölgeyi öğenin içine alır; girinti/oyuk efekti için kullanılır.
İpuçları
Gerçekçi gölge için tek yumuşak ve düşük opaklıklı bir gölge çoğu zaman yeterlidir; çok koyu veya çok geniş gölgeler yapay durur. Modern kart tasarımlarında sık kullanılan bir başlangıç: 0px 8px 24px -4px ve %10–15 opaklık. Renk seçimlerinizi Renk Kodu Çevirici ile yönetebilirsiniz. Kurumsal, tutarlı bir tasarım sistemi ve arayüz için web tasarım hizmetimize göz atın.