مولّد تأثير Neumorphism بـ CSS

كيف يعمل

يمنح تأثير Neumorphism انطباعًا بأن العنصر بارز قليلًا أو غائر في خلفيته، بفضل ظلّين متقابلين من لون الخلفية نفسه: أحدهما أفتح نحو أعلى اليسار والآخر أغمق نحو أسفل اليمين. تحسب هذه الأداة هاتين الدرجتين انطلاقًا من لون الخلفية المختار، وتكوّن الخاصية box-shadow المقابلة بشكل مباشر.

لماذا يجب أن يكون للظلّين اللون الأساسي نفسه؟

يقوم تأثير Neumorphism على تباين في السطوع بين درجات اللون نفسه (الخلفية)، لا على ألوان متباينة كما في الظل التقليدي؛ وهذا التقارب في الدرجة هو ما يمنح الإحساس الناعم «المقولب» المميز لهذا الأسلوب بدل الظل المسقط التقليدي.

على أي عناصر يُستخدم هذا التأثير؟

يناسب Neumorphism الأزرار والبطاقات وحقول النماذج والأيقونات على خلفية موحّدة فاتحة أو داكنة؛ لكنه صعب القراءة على خلفية بصورة أو بتدرج لوني، وقد يطرح أحيانًا مشكلات في إمكانية الوصول بسبب ضعف التباين، لذا ينبغي اختباره قبل اعتماده على نطاق واسع.

لا تُرسل أي بيانات إلى خادم: يتم تكوين الظل بالكامل داخل متصفحك.