Kart Önizlemeli CSS Box Shadow Oluşturucu | We.Inc
Katmanlı CSS box shadow'lar oluşturun ve bunları gerçek hizmet ve fiyat kartlarında, açık ve koyu arka planlarda, görünür bir odak durumuyla görün. CSS'i ve hazır bir kart bileşenini kopyalayın.
Gölgeleri gri bir kare üzerinde değerlendirmek zordur. Burada katmanlı bir box-shadow'u ayarlar ve Tab ile test edebileceğiniz bir klavye odak halkasıyla, açık veya koyu bir sayfada bir hizmet kartı ve bir fiyat kartı üzerinde görürsünüz. İyi göründüğünde CSS'i veya tüm kart bileşenini kopyalayın. Her şey tarayıcınızda çalışır. Yazdığınız hiçbir şey We.Inc'e ya da başka birine gönderilmez ve sekmeyi kapattığınızda kaybolur.
Bir hazır ayardan başlayın veya ilk katmanı düzenleyin: yatay ve dikey kayma, bulanıklık, yayılma, renk, opaklık ve inset.
En fazla beş katman ekleyin. Katmanlı gölgeler (dar bir tane artı geniş yumuşak bir tane), tek büyük bir gölgeden daha doğal görünür.
Önizlemeyi açık ve koyu bir sayfa arasında değiştirin. Odağı kart düğmelerine taşımak için Tab'a basın ve odak halkasının görünür kaldığını kontrol edin.
Kontroller, gölge seçilen arka planda görülemeyecek kadar soluk olduğunda ve kart metni WCAG AA kontrastının altına düştüğünde uyarır.
box-shadow bildirimini veya HTML ve CSS ile birlikte tam kart bileşenini kopyalayın.
Koyu arka planlarda gölgeler neredeyse kaybolur. Kartı ayırmak için biraz daha açık bir kart rengi veya ince bir kenarlık kullanın.
Daha yumuşak bir görünüm için gölge rengini saf siyah yerine arka planınıza doğru tonlayın.
Odağı göstermek için asla yalnızca bir gölgeye güvenmeyin. Ayrıca net bir dış çizgi kullanın.
Büyük bulanıklık değerlerinin çizilmesi daha maliyetlidir. Uzun listelerde bunları canlandırmaktan kaçının.
Derinliğin bir anlamı olması için sitenin tamamında bir veya iki gölge seviyesi kullanın.
Sıkça sorulan sorular
CSS box-shadow özelliği nasıl çalışır?
box-shadow; yatay bir kayma, dikey bir kayma, isteğe bağlı bir bulanıklık yarıçapı, isteğe bağlı bir yayılma ve bir renk, artı iç gölgeler için inset anahtar sözcüğünü alır. Virgülle ayrılarak birden fazla gölge listelenebilir; ilki en üstte çizilir.
Katmanlı gölgeler neden daha iyi görünür?
Gerçek nesneler kendilerine yakın keskin bir gölge ve daha uzakta yumuşak, geniş bir gölge düşürür. Artan bulanıklık ve azalan opaklığa sahip iki veya üç katman bunu taklit eder.
Gölgem koyu bir arka planda neden görünmüyor?
Koyu bir sayfada koyu bir gölgenin neredeyse hiç kontrastı yoktur. Araç sizi bu konuda uyarır. Kartı bunun yerine daha açık bir yüzey rengi veya ince bir kenarlıkla kaldırın.
box-shadow erişilebilirliği etkiler mi?
Gölgeler dekorasyondur, bu yüzden kendileri kontrast kurallarını karşılamak zorunda değildir. Önemli olan, karttaki metnin okunabilir kalması ve odağın yalnızca bir gölge değişikliğiyle değil, görünür bir dış çizgiyle gösterilmesidir.
CSS shadow oluşturucu ücretsiz mi?
Evet, kayıt olmadan. Kodu istediğiniz projeye kopyalayın.
Gölgeleri yayınlayacağınız bileşenlerde test edin
Tek başına bir kare üzerinde doğru görünen bir gölge, bir sıra fiyat kartında ağır görünebilir veya bir fotoğrafın altında kaybolabilir. Onu küçük bir işletme sitesinin gerçekte kullandığı kartlarda, bir simgeli hizmet kartı ve öne çıkan bir fiyat planıyla önizlemek, alacağınız sonucu gösterir.
Bileşen kodu bir focus-visible dış çizgisi içerir, böylece hangi gölgeyi seçerseniz seçin kart klavyeyle kullanılabilir kalır.