Neomorfizm CSS oluşturucu
Yumuşak, kabartma arayüz yüzeyleri oluşturun.
Neomorfizm, öğelerin yumuşakça kabartma görünmesi için eşleşen arka plan üzerinde açık ve koyu gölgeler kullanır. Arka planı, mesafeyi, yoğunluğu ve yarıçapı ayarlayın, ardından CSS'i kopyalayın.
Yüzey rengi
20px
60%
16px
background: #e0e5ec; border-radius: 16px; box-shadow: 20px 20px 30px rgba(174, 181, 195, 0.60), -20px -20px 30px rgba(255, 255, 255, 0.60);
Neomorfizm nasıl oluşturulur
- Bir arka plan rengi seçin; yumuşak pastel griler en iyi sonucu verir.
- Açık veya koyu modu seçin.
- Mesafe, yoğunluk ve yarıçapı kaydırıcılarla ayarlayın.
- CSS'i kopyalayın ve aynı arka plan rengine sahip öğelerde kullanın.
Sıkça sorulan sorular
Neden öğe arka plan rengini paylaşmalı?
İllüzyon, her iki gölgenin aynı yüzey rengiyle kaynaşmasına bağlıdır; bu yüzden öğe ve üst öğe eşleşmelidir.
Açık ile koyu mod arasındaki fark nedir?
Koyu mod, klasik açık gri görünümü yerine koyu arka plan üzerinde ince beyaz ve siyah gölgeler kullanır.
Neomorfizm erişilebilir mi?
Metin için yeterli kontrastla kullanın ve etkileşimi göstermek için yalnızca gölgeye güvenmeyin.