مولد نيو مورفизм بالكود
مرشد
مولد نيو مورفизм بالكود
ابن عناصر بسيطة، مُنَسَّبة، "نيومورفية" دون الحاجة إلى تعديل يدوي لظلال متناقضة. اختر لوناً أساسياً، اختر شكلًا (مسطح، مُنَسَّب، مُرفع، أو مُنَسَّب)، اسحب السلايدرات للمسافة، الكثافة، التباعد، وزاوية النور، ثم نسخ الكود المُنشأ مباشرة إلى مشروعك.
كيفية استخدام
- اختر لوناً للخلفية. يتم استخدام نفس اللون للعنصر والخلفية المحيطة — وهذا ما يجعل التأثير "النيومورفي" يعمل.
- اختر شكلًا: مستوي, مُنَسَّب (نُسْب بسيط)، مُرفع (نُسْب بسيط)، أو إدراج (مُنَسَّب).
- تعديل مسافة و زاوية النور لضبط اتجاه الظل.
- ضبط شدة و التباعد حتى يشعر السطح بالسلاسة.
- نسخ الكود، أو تبديل إظهار **HTML** و **CSS** لنسخ نسخة جاهزة للإدخال.
خصائص
- العرض المباشر — كل تغيير في السلايدرات يُحدث تحديثًا فوريًا للعنصر المُعرض.
- خمسة إعدادات مُضمنة — نور خفيف، نور قوي، ظلام خفيف، ظلام قوي، ومرَّة المُنَسَّب.
- ألوان الظلال المُستمدة تلقائيًا — الظلال الساطعة والظلال المظلمة تُحسَّن أو تُخفَّض رياضيًا من لون القاعدة، لضمان تطابق التأثير دائمًا.
- الأنماط المُحدبة والمتناهية — يُولَد تدرج خطي مُطابق للسطح للعنصر في هذه الأوضاع.
- وضع المُنَسَّب (مُنَسَّب) — لزرات تبدو "مُنَسَّبة" عند النقر.
- تحكم بزاوية النور — اجعل مصدر النور الافتراضي يدور من 0° إلى 360°.
- كود جاهز للنسخ — إخراج نظيف يحتوي على إعلان الظل ولون الخلفية للسطح.
التعليمات
-
ما هو النيومورفي؟
النيومورفي (أو واجهة بسيطة) هو نمط بصري يُظهر أن العناصر تُظهر تَمَدُّدًا من الخلفية أو تُنَسَّب إلى الخلفية. يتم تحقيقه باستخدام ظلال مربوطة بدرجة تباعد متساوية — ظل أخف على الجانب الذي يواجه النور، وظل أثقل على الجانب المقابل — ويُعرض كخلفية مطابقة لون العنصر نفسه.
-
لماذا يجب أن يشارك العنصر لون الخلفية؟
يعتمد النيومورفي على الاحساس بأن الشكل جزء من نفس السطح مع الخلفية. إذا استخدم العنصر لونًا مختلفًا، فإنه لا يظهر كمُنَسَّب، بل يُنظر إليه كمُسطح بظلال عشوائية، مما يُفسد التأثير.
-
هل واجهات النيومورفي متوافقة مع المعايير؟
تُعاني من تناقضات مع المعايير الخاصة بالوصول. لأن جميع العناصر تستخدم نفس لون الخلفية، فإن التباين مع النص والواجهات الأخرى غالبًا ما يكون منخفضًا، مما يُخالف متطلبات معايير WCAG للضوء والظلام، وقد يُسبب ارتباكًا للأشخاص الذين يستخدمون مُضخات الشاشة. استخدم النيومورفي لواجهات تزيينية واحتفظ بعناصر التفاعل الأساسية بدرجة تباين عالية.
-
ما العلاقة بين زاوية النور وانحراف الظلال؟
يُحسب اثنين من امتدادات الظلال من خلال حسابات ترجمة بسيطة: offsetX = cos(angle) × distance، offsetY = sin(angle) × distance. يُوضع الظل المقابل عند القيم المعاكسة لضمان أن الظلال السطحية تقع على أطر متقابلة، كما يحدث عند مصدر نور حقيقي.
تثبيت ملحقاتنا
أضف أدوات IO إلى متصفحك المفضل للوصول الفوري والبحث بشكل أسرع
恵 وصلت لوحة النتائج!
لوحة النتائج هي طريقة ممتعة لتتبع ألعابك، يتم تخزين جميع البيانات في متصفحك. المزيد من الميزات قريبا!
أدوات يجب تجربتها
عرض الكلشارك
ساعدنا على الاستمرار في تقديم أدوات مجانية قيمة
