Bu araç hangi CSS özelliğini oluşturur?

Tek bir box-shadow kuralı oluşturur, örneğin box-shadow: 4px 4px 12px 0 rgba(0,0,0,0.2). Bu satırı kopyalayıp stil dosyanıza veya satır içi stile yapıştırırsınız.

Inset seçeneği ne işe yarar?

Inset, gölgeyi elemanın arkasına değil içine çizer ve bu da basılı ya da iç parlama görünümü verir. Kutunun dışına düşen normal bir gölge için kapalı bırakın.

Yayılma ve opaklık neden kullanılır?

Yayılma, bulanıklık uygulanmadan önce gölgeyi büyütür veya küçültür, yani pozitif bir değer onu daha büyük yapar, negatif bir değer ise içeri çeker. Opaklık, gölge renginin ne kadar güçlü göründüğünü belirler ve hafif bir izden ağır bir gölgeye geçmenizi sağlar.

CSS Box Shadow Oluşturucu

X Kayması: 0px

Y Kayması: 12px

Bulanıklık: 24px

Yayılma: 0px

Gölge rengi

Saydamlık: 25%

İçe gölge

CSS

.element {
  box-shadow: 0px 12px 24px 0px rgba(26, 26, 46, 0.25);
}

Box Shadow Oluşturucu ne yapar

Bu araç, değer sırasını ezberlemeden veya sayıları tahmin etmeden bir CSS box-shadow oluşturmanıza yardımcı olur. Birkaç kaydırıcıyı hareket ettirirsiniz, bir renk seçersiniz ve canlı bir önizleme kutusu gölgenin tam olarak nasıl göründüğünü gösterirken eşleşen CSS yanında güncellenir. Doğru göründüğünde kuralı kopyalayıp stil dosyanıza eklersiniz. Ön uç geliştiriciler, tasarımcılar, CSS öğrenen öğrenciler ve tarayıcı geliştirici araçlarında deneme yanılma yapmadan temiz bir kart, düğme veya panel gölgesi isteyen herkes için kullanışlıdır.

Nasıl kullanılır

Gölgeyi sola veya sağa taşımak için yatay kaydırma kaydırıcısını sürükleyin.
Gölgeyi yukarı veya aşağı taşımak için dikey kaydırma kaydırıcısını sürükleyin.
Kenarın ne kadar yumuşak veya keskin göründüğü için bulanıklık kaydırıcısını ayarlayın.
Gölge boyutunu büyütmek veya küçültmek için yayılma kaydırıcısını ayarlayın.
Gölgenin ne kadar güçlü göründüğünü kontrol etmek için opaklık kaydırıcısını ayarlayın.
Gölge rengini renk seçiciyle seçin.
Gölgeyi elemanın arkasında değil içinde isterseniz inset seçeneğini açın.
Önizleme ve CSS güncellenmesini canlı izleyin, ardından oluşturulan box-shadow kuralını kopyalayın.

Hızlı bir örnek

Yumuşak, modern bir gölge için yatay kaydırmayı sıfıra yakın tutun, küçük pozitif bir dikey kaydırma ayarlayın, bulanıklığı iyice yükseltin, yayılmayı sıfırda bırakın ve gölge belli belirsiz kalsın diye opaklığı düşürün. Bu, çoğu panoda gördüğünüz nazik kalkmış kart etkisini verir. Buradan tüm değeri elle yeniden yazmak yerine tek bir kaydırıcıyı hafifçe oynatarak ince ayar yapabilirsiniz.

Hepsi tarayıcınızda çalışır, bu yüzden hiçbir şey yüklenmez. Araç özeldir, ücretsizdir ve kayıt gerektirmez.

Sıkça sorulan sorular

Bu araç hangi CSS özelliğini oluşturur?: Tek bir box-shadow kuralı oluşturur, örneğin box-shadow: 4px 4px 12px 0 rgba(0,0,0,0.2). Bu satırı kopyalayıp stil dosyanıza veya satır içi stile yapıştırırsınız.
Inset seçeneği ne işe yarar?: Inset, gölgeyi elemanın arkasına değil içine çizer ve bu da basılı ya da iç parlama görünümü verir. Kutunun dışına düşen normal bir gölge için kapalı bırakın.
Yayılma ve opaklık neden kullanılır?: Yayılma, bulanıklık uygulanmadan önce gölgeyi büyütür veya küçültür, yani pozitif bir değer onu daha büyük yapar, negatif bir değer ise içeri çeker. Opaklık, gölge renginin ne kadar güçlü göründüğünü belirler ve hafif bir izden ağır bir gölgeye geçmenizi sağlar.