0

Ankastre CSS Kutusu Gölgesi — Hazır Kod

CSS kutu-gölge kodunu görsel olarak oluşturun: ofset, bulanıklaştırma, yayma, opaklıkla renklendirme, iç metin modu ve canlı önizlemeyle dört adede kadar katman için kaydırıcılar.

0px
4px
12px
0px
0.25
İşleniyor... 0%

Sonuç

Bu sayfa, kutu gölgesi oluşturucuyu iç metin onay kutusu zaten işaretlenmiş halde açar, böylece gölge, öğenin arkasına değil içine çizilir. Önizleme kartı batık efektini aynı anda gösterir ve her kaydırıcı CSS satırını canlı olarak güncellemeye devam eder.

Ek gölgeler, CSS'nin içe doğru derinlik sahtekarlığı yapmasıdır: basılan düğme durumları, arama alanları ve giriş kuyuları, ilerleme çubuğu olukları ve oyulmuş panellerin tümü bunlara dayanır. Gölge iç kenarı sardığından, bulanıklık ve yayılma normal alt gölgeden biraz farklı davranır; buradaki kaydırıcılar bu farkı hemen hissetmenizi sağlar.

Batık görünüm doğru olduğunda kutu-gölge çizgisini stil sayfanıza kopyalayın. Ayrıca bir iç metin katmanını normal dış katmanlarla birleştirebilirsiniz; ikinci bir katman ekleyin ve her ikisini de tek bir bildirimde karıştırmak için üzerindeki ekin işaretini kaldırın.