Box shadow oluşturucu
Doğal görünen gölgeler için birkaç yumuşak katmanı üst üste ekleyin, ardından CSS’i kopyalayın.
Bu cihazda mühürlendi
Tarayıcınızda çalışır. Hiçbir şey yüklenmez.
Mühürlü
Önizleme
Gölge katmanları
Henüz gölge yok. Başlamak için bir katman ekleyin.
CSS kodu
Nasıl çalışır
-
Bir hazır ayarla başlayın
Başlangıç noktası olarak yumuşak, katmanlı, havada, keskin veya iç gölgeyi seçin.
-
Katmanları ayarlayın
Her katmanın kaydırmasını, bulanıklığını, yayılmasını, rengini ve opaklığını ayarlayın; katman ekleyin veya kaldırın. Önizleme siz ayarladıkça güncellenir.
-
CSS’i kopyalayın
box-shadow bildirimini kopyalayıp stil dosyanıza yapıştırın.
Sıkça sorulan sorular
Bulanıklık ve yayılma ne işe yarar?
Bulanıklık gölgenin kenarını yumuşatır: değer yükseldikçe gölge daha dağınık olur. Yayılma, bulanıklık uygulanmadan önce gölgeyi büyütür veya küçültür. Negatif yayılma ile büyük bir bulanıklık, modern arayüzlerde sık görülen yumuşak, havada duran görünümü verir.
Neden birden fazla gölge katmanı kullanmalı?
Gerçek gölgelerin nesneye yakın, koyu ve sıkı bir çekirdeği ve daha uzakta yumuşak, geniş bir halesi vardır. Küçük, keskin bir katmanı bir veya iki büyük, açık katmanla üst üste koymak bunu yeniden üretir ve tek bir gölgeden çok daha doğal görünür.
Inset gölge nedir?
Inset gölge, öğenin dışına değil içine çizilir. Yüzeyin içe basılmış gibi görünmesini sağlar; giriş alanları veya basılı düğmeler için iyi sonuç verir.
Gölge tüm tarayıcılarda çalışır mı?
Evet. box-shadow, çoklu katmanlar ve kodda kullanılan rgb() renk sözdizimi tüm güncel tarayıcılarda desteklenir.
Box shadow sayfamı yavaşlatır mı?
Sabit gölgeleri çizmek ucuzdur. Çok sayıda öğede çok büyük bulanıklıklar ya da gölgenin kendisini canlandırmak daha maliyetli olabilir. Bir gölgeyi akıcı biçimde canlandırmak için bunun yerine gölgeyi taşıyan bir sözde öğenin opaklığını değiştirin.