Neumorphism Üretici

Bu araç ne işe yarar?

Neumorphism Üretici, soft UI tarzındaki yumuşak gölge efektini canlı bir önizlemeyle oluşturmanızı sağlar. Renk, boyut, köşe yarıçapı ve gölge yoğunluğunu kaydırıcılarla ayarlar, dışbükey veya bastırılmış (inset) görünüm arasında geçiş yapar ve hazır box-shadow CSS'ini kopyalarsınız. Tasarımcılar ve frontend geliştiriciler için kart, düğme ve panel tasarlamayı kolaylaştırır.

Nasıl kullanılır?

Değerleri ve seçenekleri ayarlayın.
Canlı önizlemede sonucu görün.
Üretilen CSS/kodu projenize kopyalayın.

Canlı önizleme ve dört ayar

Araç, ayarlarınızı gerçek zamanlı uygulanan bir önizleme öğesinde gösterir. Renk seçici arka plan tonunu belirler; bu ton aynı zamanda hem aydınlık hem koyu gölgenin temelidir. Boyut kaydırıcısı gölge mesafesini ve bulanıklığını kontrol eder, yarıçap köşeleri yuvarlar, yoğunluk ise açık ve koyu gölgeler arasındaki kontrastı ayarlar. Inset kutusu öğeyi yüzeyin içine bastırılmış gibi gösterir; bu, basılı düğme durumları için idealdir.

Neumorphism nasıl çalışır

Neumorphism efekti, aynı renkteki bir arka planın üzerine biri açık biri koyu olmak üzere iki zıt gölge yerleştirerek öğenin yüzeyden çıktığı yanılsamasını yaratır. Araç, seçtiğiniz rengi yoğunluk değerine göre aydınlatıp koyulaştırarak bu iki gölgeyi otomatik hesaplar. Önemli ipucu: arka plan ile öğe aynı rengi paylaşmalıdır, aksi halde efekt bozulur. Tüm CSS tarayıcınızda üretilir, hiçbir veri gönderilmez.

Sıkça sorulan sorular

Inset seçeneği ne işe yarar?

Inset, gölgeleri öğenin dışına değil içine taşır, böylece öğe yüzeye gömülü veya basılı görünür. Basılı düğme durumları ve girdi alanları için kullanışlıdır.

Efektin düzgün görünmesi için arka planı nasıl ayarlamalıyım?

Ana hile, öğenin arka planı ile sayfa arka planının tam olarak aynı rengi paylaşmasıdır. Üretilen background değerini hem öğeye hem onu saran kapsayıcıya uygulayın.

Yoğunluk ayarı neyi değiştirir?

Yoğunluk, seçtiğiniz renkten ne kadar açık ve koyu gölge türetileceğini belirler. Düşük değerler ince ve yumuşak bir kabartma, yüksek değerler daha belirgin bir kontrast verir.