CSS Gölge Oluşturucu

Referans

CSS box-shadow nedir?

CSS box-shadow özelliği, bir öğenin çerçevesi etrafına bir veya daha fazla gölge efekti ekler. Öğeye göre ofsetler, bulanıklık ve yayılma yarıçapları, renk ve isteğe bağlı inset anahtar kelimesi ile tanımlanır. Birden fazla gölge virgülle ayrılır ve önden arkaya doğru oluşturulur.

box-shadow sözdizimi

box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] color;
offset-x: Yatay mesafe. Pozitif = sağ, negatif = sol.
offset-y: Dikey mesafe. Pozitif = aşağı, negatif = yukarı.
blur-radius (isteğe bağlı, varsayılan 0): Daha büyük değerler daha yumuşak, dağınık gölge üretir.
spread-radius (isteğe bağlı, varsayılan 0): Pozitif değerler gölgeyi genişletir, negatif değerler daraltır.
inset (isteğe bağlı): Gölgeyi öğenin içine taşır.

Birden fazla gölge katmanı kullanma

Birden fazla gölgeyi birleştirmek gerçekçi derinlik efektleri oluşturur. Yaygın bir teknik, öğeye yakın sıkı ve koyu bir gölge (tanım için) ile uzaktaki büyük ve soluk bir gölgeyi (derinlik için) birleştirmektir. Material Design ve modern tasarım sistemleri, yüksekliği iletmek için katmanlı gölgeler kullanır.

Gölgeler için tasarım ipuçları

rgba() veya hsla() renkleri kullanın — yarı saydam gölgeler opak olanlardan daha doğal görünür.
Işık kaynağını tutarlı tutun — tüm arayüzde aynı ofset yönünü kullanın.
Saf siyahtan kaçının — marka renginizin koyu bir tonu daha yumuşak gölgeler oluşturur.
Performans — box-shadow boyama işlemlerini tetikler. Animasyonlu öğeler için filter: drop-shadow() tercih edin.

Gizlilik

Tüm gölge oluşturma %100 tarayıcınızda çalışır. Hiçbir veri sunucuya gönderilmez.