مولّد Neumorphism CSS
ولّد CSS لواجهة ناعمة (neumorphism): ظلال فاتحة وداكنة مشتقة من لونك الأساسي وأشكال مسطحة أو مقعرة أو محدبة أو مضغوطة وأربعة اتجاهات للضوء.
إعدادات التصميم النيومورفي
يُشتق الظلان الفاتح والداكن من اللون الأساسي برفع إضاءته في OKLCH وخفضها بمقدار الشدة. استخدم اللون نفسه لخلفية الصفحة.
معاينة
border-radius: 50px; background: #e0e0e0; box-shadow: 20px 20px 60px #b0b0b0, -20px -20px 60px #ffffff;
أدوات ذات صلة
عرض الكلما هو مولّد Neumorphism؟
ينتج مظهر الواجهة الناعمة حيث يبدو العنصر بارزاً من الصفحة أو مضغوطاً فيها. يشتق لون ظل أفتح وآخر أغمق من لونك الأساسي ويجمعهما كظلين متعاكسين لـ box-shadow، مع تعبئة تدرجية اختيارية للأسطح المقعرة والمحدبة.
كيفية استخدام مولّد Neumorphism
- أدخل اللون الأساسي (استخدم اللون نفسه لخلفية صفحتك).
- اختر الشكل: مسطح أو مقعر أو محدب أو مضغوط.
- اختر اتجاه مصدر الضوء.
- اضبط المسافة والتمويه والشدة ونصف القطر وحجم المعاينة.
- انسخ كود CSS.
مثال
Base #e0e0e0, flat, light from top left, distance 20px, blur 60px, intensity 0.15, radius 50px
border-radius: 50px; background: #e0e0e0; box-shadow: 20px 20px 60px #b0b0b0, -20px -20px 60px #ffffff;
متى تستخدم مولّد Neumorphism
استخدمه للوحات المعلومات المرحة وأدوات التحكم في تطبيقات المنزل الذكي أو الموسيقى وأعمال المعارض الشخصية. التباين في neumorphism منخفض بطبيعته، فلا تعتمد عليه وحده للأزرار أو حقول النماذج المهمة؛ وأضف تسميات واضحة أو أيقونات أو حلقة تركيز لإمكانية الوصول.
كيف يعمل مولّد Neumorphism
تُحسب ألوان الظل الفاتح والداكن في OKLCH برفع وخفض إضاءة اللون الأساسي بمقدار الشدة مع إبقاء الصبغة والإشباع (مع ملاءمة نطاق sRGB)، فتعمل أيضاً مع الألوان الأساسية الملونة والداكنة. يُزاح الظل الداكن بعيداً عن مصدر الضوء بمقدار المسافة والظل الفاتح نحوه، وكلاهما بالتمويه نفسه. يستخدم المضغوط ظلين inset. ويضيف المقعر والمحدب linear-gradient تتبع زاويته اتجاه الضوء، بألوان أفتح وأغمق بثلث الشدة.
حالات الاستخدام الشائعة
- أزرار تبديل وضغط ناعمة
- بطاقات لوحات معلومات على خلفية مطابقة
- حالة الضغط لعناصر التحكم النشطة
- واجهات الآلة الحاسبة أو مشغل الموسيقى
- واجهة ناعمة للوضع الداكن باستخدام لون أساسي داكن
الأسئلة الشائعة
لماذا يجب أن تطابق خلفية الصفحة اللون الأساسي؟
ينبع الوهم من كون العنصر بلون محيطه نفسه، بحيث لا تكشف شكله إلا الظلال. الخلفية المختلفة تكسر التأثير.
هل يعمل على الألوان الداكنة؟
نعم. لأن الإضاءة تُزاح في OKLCH ولا تُضرب، فيحصل اللون الأساسي الداكن أيضاً على ظل إبراز أفتح بوضوح.
ما الفرق بين المقعر والمحدب؟
المحدب أفتح في الجانب المواجه للضوء (يبدو بارزاً)؛ والمقعر أغمق هناك (يبدو مجوفاً).