CSS Neumorfizm Oluşturucu

CSS Neumorfizm Oluşturucu nedir?

CSS Neumorfizm Oluşturucu, öğelerin aynı tondaki iki kaydırılmış gölge kullanarak yüzeyden dışarı taşıyormuş veya içine bastırılmış gibi göründüğü soft-UI (neumorfizm) görünümünü oluşturmaya yarayan ücretsiz bir görsel araçtır. Eşli box-shadow değerlerini elle ayarlamadan o ince, dokunsal derinliği isteyen arayüz tasarımcıları ve ön uç geliştiricileri için yapılmıştır. Seçici ya da bir onaltılık alanla temel rengi belirleyin, Şekli Düz, İçbükey ve Dışbükey arasında değiştirin ve Mesafeyi (gölgelerin ne kadar kaydığı), Yoğunluğu (açık/koyu kontrastının gücü), Bulanıklığı (yumuşaklık) ve Yarıçapı (köşe yuvarlaklığı) ayarlayın. Araç, temel renginizden daha açık bir parlama ve daha koyu bir gölge türetip bunları birleştirir — içbükey ve dışbükey şekiller için isteğe bağlı olarak ince bir gradyan katmanlayarak — tek bir CSS kuralına dönüştürür, uyumlu bir arka plan üzerinde canlı gösterir ve kopyalanabilir kod olarak çıkarır.

CSS Neumorfizm Oluşturucu nasıl kullanılır

1. Yüzeyin temel rengini örnekle veya #e0e5ec gibi bir onaltılık değer yazarak seçin.
2. Bir Şekil seçin: Yükseltilmiş bir panel için Düz, içeri bastırılmış bir çukur için İçbükey veya kubbeli bir tümsek için Dışbükey.
3. Daha derin bir kabartma için açık ve koyu gölgeleri daha dışarı taşımak üzere Mesafeyi ayarlayın.
4. Parlama/gölge kontrastını daha güçlü veya daha ince yapmak için Yoğunluğu değiştirin.
5. Daha yumuşak veya daha keskin kenarlar için Bulanıklığı, köşeleri yuvarlamak için Yarıçapı ayarlayın.
6. Canlı önizlemeyi kontrol edin, ardından üretilen neumorfizm CSS'sini stil sayfanıza kopyalayın.

Örnekler

renk #e0e5ec, şekil Düz, mesafe 12, yoğunluk 15, bulanıklık 24, yarıçap 20

border-radius: 20px;
background: #e0e5ec;
box-shadow: 12px 12px 24px #bec3c9, -12px -12px 24px #e5e9ef;

renk #e0e5ec, şekil İçbükey, mesafe 8, yoğunluk 15, bulanıklık 16, yarıçap 16

border-radius: 16px;
background: linear-gradient(145deg, #d0d5db, #e2e7ed);
box-shadow: 8px 8px 16px #bec3c9, -8px -8px 16px #e5e9ef;

renk #3a3f47, şekil Dışbükey, mesafe 6, yoğunluk 20, bulanıklık 12, yarıçap 12

border-radius: 12px;
background: linear-gradient(145deg, #484c54, #363b42);
box-shadow: 6px 6px 12px #2e3239, -6px -6px 12px #61656c;

Sıkça sorulan sorular

Neumorfizm nedir?

Neumorfizm (veya soft UI), aynı tondaki iki kaydırılmış box-shadow — sol üstte daha açık, sağ altta daha koyu olan — kullanarak öğelerin tek renkli bir yüzeyden dışarı taşıyormuş veya içine bastırılmış gibi göründüğü bir biçemdir. Bu araç her iki gölgeyi de temel renginizden türetir, böylece her zaman yüzeyle uyumlu olurlar.

Düz, İçbükey ve Dışbükey arasındaki fark nedir?

Düz, yüzeyi tek bir düz renkte tutar, böylece öğe arka planın üzerinde yükseltilmiş görünür. İçbükey, sol üste doğru koyulaşan ince bir gradyan ekleyerek içeri oyulmuş gibi gösterir. Dışbükey, gradyanı ters çevirerek merkezin kubbeli ve kabarık görünmesini sağlar. Açık ve koyu gölgeler aynı kalır; yalnızca yüzey dolgusu değişir.

Mesafe, Yoğunluk, Bulanıklık ve Yarıçap nasıl çalışır?

Mesafe, her iki gölgenin piksel cinsinden kaymasıdır — daha büyük değerler öğeyi yüzeyden daha uzağa iter. Yoğunluk, iki gölge renginin temel renge göre ne kadar daha açık ve daha koyu olduğunu denetler. Bulanıklık gölge kenarlarını yumuşatır, Yarıçap ise köşeleri yuvarlar. Bunlardan herhangi birini değiştirdiğinizde CSS canlı olarak güncellenir.

Arka plan için hangi rengi kullanmalıyım?

Neumorfizm yalnızca öğe aynı temel renkteki bir yüzeyin üzerinde oturduğunda doğru görünür — aynı rengi üst öğeye veya sayfa arka planına uygulayın. Önizleme, temel renginizi arka plan olarak kullanır, böylece kopyalamadan önce etkiyi doğru biçimde değerlendirebilirsiniz.

Verilerim herhangi bir yere yükleniyor mu?

Hayır. Oluşturucu tamamen tarayıcınızda JavaScript ile çalışır — renginiz ve ayarlarınız hiçbir zaman bir sunucuya gönderilmez, böylece gizli bir şekilde ve sayfa bir kez yüklendikten sonra çevrimdışı bile çalışır.