ما هو مولد CSS Neumorphism؟
يقوم مولد CSS Neumorphism ببناء عناصر واجهة المستخدم الناعمة - النمط الذي يبدو فيه الشكل مبثوقًا بلطف من الخلفية أو مضغوطًا عليها باستخدام الظلال الفاتحة والداكنة المقترنة. يمكنك ضبط لون السطح ومسافة الظل والطمس وكثافة التباين ونصف قطر الزاوية والشكل ومشاهدة معاينة مباشرة ونسخ CSS الدقيق.
يعمل NeuMorphism عن طريق وضع ظليتين مربعتين على عنصر يشاركه خلفيته مع الصفحة: ظل أفتح في الجزء العلوي الأيسر والآخر أغمق في أسفل اليمين. إن الحصول على لونين من الظل والإزاحة لتبدو ناعمة بشكل مقنع أمر صعب باليد. تشتق هذه الأداة الظلال الفاتحة والداكنة من لون السطح تلقائيًا ، لذلك يبدو التأثير دائمًا متوازنًا.
كل شيء يعمل في متصفحك. اختر إعدادًا مسبقًا ، واضبط المنزلقات ، وقم بالتبديل بين الأشكال المسطحة ، والمقعرة ، والمحدبة ، والمضغوطة ، وانسخ CSS. لا يوجد حساب ولا تحميلات ، ويستمر في العمل دون اتصال بمجرد تحميل الصفحة.
يستحق Neumorphism استخدامه بعيون واضحة حول نقطة ضعفه الرئيسية، وهي إمكانية الوصول. يعمل الأسلوب عن طريق وضع ظل فاتح وظل داكن على سطح بنفس لون خلفيته تقريبًا، لذلك يتم تحديد حافة التحكم من خلال اختلاف في النصوع بنسبة قليلة في المائة. يُقرأ على أنه أنيق لبعض المشاهدين وغير مرئي لأي شخص لديه حساسية تباين منخفضة، على شاشة خافتة، أو في الهواء الطلق. إنه يفشل WCAG 1.4.11، الذي يطلب نسبة 3:1 على حدود المكون التفاعلي. الحل الوسط المعتاد هو الحفاظ على نمط الأسطح الزخرفية وإعطاء العناصر التفاعلية الحقيقية حدودًا حقيقية أو حالة تركيز واضحة. ألوان الظل مشتقة من لون السطح هنا، لذلك ينتج السطح الداكن زوجًا مقلوبًا بشكل صحيح بدلاً من اللون الرمادي.
كيفية استخدام مولد CSS Neorphormism؟
اضبط لون السطح
اختر لون العنصر الخاص بك، والذي يجب أن يتطابق مع خلفية الصفحة خلفه - يعتمد الشكل الجديد على العنصر والصفحة التي تشترك في نفس اللون الأساسي.
ضبط الظلال
اضبط المسافة ، والطمس ، والشدة للتحكم في مدى رفع العنصر عن الصفحة ومدى قوة تباين الضوء / الظلام.
اختر شكلا
التبديل بين مسطح ، مقعر ، محدب ، ومضغوط. يستخدم الضغط على الظلال الداخلية لتبدو غارقة ، بينما يضيف التقعر والمحدب تدرجًا دقيقًا.
انسخ css
انسخ الكتلة التي تم إنشاؤها - نصف قطر الحدود والخلفية وظل الصندوق المقترن - والصقها على بطاقتك أو زرك أو اللوحة.
الميزات الرئيسية
ألوان الظل التلقائية
ظلال الظلال الفاتحة والداكنة مشتقة من لون السطح الخاص بك ، لذلك يبدو تأثير واجهة المستخدم الناعمة دائمًا متوازنًا دون تعديل يدوي
أربعة أشكال
مسطح ، مقعر ، محدب ، غطاء مضغوط مرتفع ومظهر غارق ، مع الضغط باستخدام الظلال الداخلية والغطاء / المحدب إضافة تدرج دقيق
السيطرة الكاملة
تتيح لك أشرطة التمرير لمسافة الظل والتشويش وكثافة التباين ونصف قطر الزاوية طلب التأثير من هناك إلى دراماتيكي
معاينة مباشرة
المعاينة تجلس على خلفية مطابقة بحيث تتم قراءة الظلال الناعمة بشكل صحيح ، ويتم تحديثها على الفور أثناء التحرير
Frequently Asked Questions
Related Tools
CSS Border Radius Generator
Round any corner with a live preview and per-corner sliders, switch between px, %, em, and rem, and copy the shortest valid CSS border-radius.
Credit Card Validator
Check a credit card number against the Luhn checksum and detect its card network. Validates the format only, never contacts a bank.
CSS Filter Generator
Apply blur, brightness, contrast, grayscale, sepia, hue-rotate and more with live sliders and a preview, then copy production-ready CSS filter code.
CSS Text Shadow Generator
Design layered CSS text-shadows with a live preview and sliders for offset, blur, color, and opacity - build glow, outline, retro 3D, and emboss effects, then copy production-ready CSS.
Comments
0 comments
No comments yet. Be the first to share your thoughts!