Nömorfizm CSS Gölgesi — İki Katmanlı 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, oluşturucuyu halihazırda oluşturulmuş klasik nemorfik çiftle açar: beyaza yakın −8px/−8px'lik bir açık katman ofseti ve sessiz gri-mavide 8px/8px'lik koyu bir katman ofseti, her ikisi de 16px bulanık. Her bir tarafı bağımsız olarak ayarlamak için katman listesindeki iki katman arasında geçiş yapın.
Nömorfizm (yumuşak kullanıcı arayüzü), 2020'de zirveye çıkan kabartmalı stildir: Öğeler, arka planın üzerinde yüzmek yerine arka plandan çıkmış gibi görünür. Dürüst olmak gerekirse, gerçek ödünleşimler beraberinde geliyor - efekt yalnızca öğenin arka planı sayfa arka planıyla eşleştiğinde işe yarıyor ve düşük kontrastlı kenarlar erişilebilirliğe zarar verebilir - bu nedenle çoğu ekip artık bunu tam bir tasarım dili olarak değil, bir aksan olarak kullanıyor.
Stil projenize uyuyorsa, bu iki katmanlı bildirim standart başlangıç noktasıdır: CSS'yi kopyalayın, öğeyi ve sayfa arka planını aynı yumuşak griye ayarlayın ve eşleşen bir kenarlık yarıçapı ekleyin. Tarayıcınızda her şey yerel olarak çalışır.