0

Kart Gölgesi CSS - İnce kutu gölgesi Kodu

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, klasik kart gölgesi için kutu gölge oluşturucu ön ayarını açar: 2 piksel aşağı, 8 piksel bulanıklık, %15 siyah opaklık. Kasıtlı olarak sessizdir (kendisini duyurmadan bir kartı sayfadan ayırmaya yetecek kadar) ve ön izleme tam olarak ne kadar sessiz olduğunu gösterir.

Bu aralık çoğu tasarım sistemindeki en düşük yükseklik adımlarına karşılık gelir: liste kartları, açılır menüler, açılır pencereler ve fareyle üzerine gelindiğinde tablo satırları. Modallar veya yüzen paneller için daha güçlü bir kaldırmaya ihtiyacınız varsa, Y ofsetini yükseltin ve birlikte bulanıklaştırın; ışık kaynağını inandırıcı tutmak için orantılı olarak büyümeleri gerekir.

Kutu gölgesi çizgisini bileşen stillerinize kopyalayın veya kenar tanımı eklemek için daha sıkı bir bulanıklığa sahip ikinci bir katman olarak çoğaltın. Araç ücretsizdir ve tamamen tarayıcınızda çalışır.