Neumorphism Oluşturucu
Çift gölgeyle yumuşak, kabartmalı neumorfik UI yüzeyleri tasarlayın ve CSS'i kopyalayın.
—
Tuval arka planı öğe rengiyle eşleşir — yumuşak, kabartmalı neumorfik görünümü sağlayan da budur.
Varsayılan olarak açık ve koyu gölgeler temel renkten türetilir. Kendiniz ayarlamak için etkinleştirin.
Neumorphism Oluşturucu Hakkında
Neumorphism Generator, yumuşak, kabartma "soft UI" görünümünü tasarlar: arkasındaki yüzeyden dışarı doğru — veya içine doğru — bastırılmış gibi görünen bir öğe. Tek bir temel renk seçin, araç geri kalan her şeyi türetsin; çünkü bu efekt yalnızca öğe ile arka planı aynı rengi paylaştığında ve derinlik tamamen iki zıt box-shadow'dan geldiğinde işe yarar.
Kaydırıcılar geometriyi kontrol eder: boyut, köşe yarıçapı, gölgelerin mesafesi, yoğunluğu ve bulanıklığı. Dört şekil modu — flat, concave, convex ve pressed — iç gradyanı ve gölge yönünü değiştirir; bir ışık kaynağı seçici ise vurguyu dört köşeden birine taşıyarak öğenin tasarımınızın aydınlatmasıyla eşleşmesini sağlar.
Varsayılan olarak açık ve koyu gölge renkleri temel renkten hesaplanır, ancak manuel mod ikisini de kendiniz ayarlamanızı sağlar. Oluşturulan CSS — background, radius ve çift box-shadow — tek tıklama uzaklıktadır.
Neumorphism Oluşturucu Nasıl Kullanılır
- Temel rengi seçin — hem öğeye hem de arkasındaki tuvale uygulanır.
- Bir şekil seçin: flat, concave, convex veya pressed.
- Vurgunun nereye düşeceğini kontrol etmek için ışık kaynağı köşesini ayarlayın.
- Kaydırıcılarla boyutu, köşe yarıçapını, mesafeyi, yoğunluğu ve bulanıklığı ince ayarlayın.
- Türetilmiş açık ve koyu tonları geçersiz kılmak isterseniz manuel gölge renklerini etkinleştirin.
- CSS'i kopyalayıp öğenize yapıştırın.