لقد كانت النيومورفيسم (أو واجهة المستخدم الناعمة) بمثابة اتجاه هائل في تصميم الويب. إنه يخلق مظهرًا بلاستيكيًا جميلاً مقذوفًا يشعرك بالفخامة والحداثة.
ومع ذلك، فإن برمجة أزرار Neumorphic من الصفر تمثل صداعًا كبيرًا.
الرياضيات وراء الظلال
يتطلب الزر Neumorphic المثالي ظلين مربعين متوازنين تمامًا: 1. ظل خفيف في أعلى اليسار لمحاكاة مصدر الضوء. 2. ظل داكن في أسفل اليمين لمحاكاة العمق.
إذا كان التباين مرتفعًا جدًا، فسيبدو قاسيًا. إذا كان منخفضًا جدًا، فسيختفي الزر في الخلفية.
```المغلق / صيغة النيومورفيسم الكلاسيكية / الخلفية: #e0e5ec؛ صندوق الظل: 9px 9px 16px rgb(163,177,198,0.6), -9px -9px 16px rgba(255,255,255, 0.5); ```
الطريقة الأسرع
بدلاً من تعديل قيم CSS لساعات في DevTools، يمكنك استخدام [CSS Button Generator](/en/css-button-generator).
تسمح لك أداتنا بالاتصال بصريًا بنصف قطر الحدود واللون وكثافة الظل التي تريدها. بمجرد أن يبدو مثاليًا على الشاشة، ما عليك سوى النقر فوق "نسخ CSS" وإفلاته في مكون React أو ورقة الأنماط الخاصة بك.
توقف عن كتابة ظلال CSS الخام وابدأ في إنشائها بصريًا!