Soft CSS Kutu 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.
Sonuç
Bu sayfa, yumuşak bir gölgeyle önceden yüklenmiş kutu gölge oluşturucuyu açar: yatay kayma yok, 8 piksel aşağı, 24 piksellik cömert bir bulanıklık ve %12'lik düşük bir siyah opaklık. Önizleme kartı bunu anında oluşturur; herhangi bir kaydırıcıyı hareket ettirdiğinizde CSS satırı gerçek zamanlı olarak takip eder.
Yumuşak gölgeler modern arayüzlerin en önemli unsurudur. Düşük opaklıkla eşleştirilmiş büyük bir bulanıklık, sert bir taslak çizmeden kartı sayfadan kaldırır; bu nedenle çoğu tasarım sistemi, eski düz tasarımın yoğun, koyu gölgeleri yerine yükseklik gölgelerini tam olarak bu aralıkta tutar.
Kutu gölgesi çizgisini doğrudan stil sayfanıza kopyalayın veya daha zengin bir görünüm için üç katmana kadar daha üst üste yığın. Oluşturucu tamamen tarayıcınızda çalışır; hiçbir yere hiçbir şey yüklenmez.