Presets
Distance12px
Blur24px
Intensity15%
Radius24px
Generated CSS
border-radius: 24px;
background: #e0e0e0;
box-shadow: 12px 12px 24px #bababa, -12px -12px 24px #ffffff;Category:css
Mode:Offline
Version:1.0.0
Access:Free
ما هو مولد CSS Neumorphism؟
يقوم مولد CSS Neumorphism ببناء عناصر واجهة المستخدم الناعمة - النمط الذي يبدو فيه الشكل مبثوقًا بلطف من الخلفية أو مضغوطًا عليها باستخدام الظلال الفاتحة والداكنة المقترنة. يمكنك ضبط لون السطح ومسافة الظل والطمس وكثافة التباين ونصف قطر الزاوية والشكل ومشاهدة معاينة مباشرة ونسخ CSS الدقيق.
يعمل NeuMorphism عن طريق وضع ظليتين مربعتين على عنصر يشاركه خلفيته مع الصفحة: ظل أفتح في الجزء العلوي الأيسر والآخر أغمق في أسفل اليمين. إن الحصول على لونين من الظل والإزاحة لتبدو ناعمة بشكل مقنع أمر صعب باليد. تشتق هذه الأداة الظلال الفاتحة والداكنة من لون السطح تلقائيًا ، لذلك يبدو التأثير دائمًا متوازنًا.
كل شيء يعمل في متصفحك. اختر إعدادًا مسبقًا ، واضبط المنزلقات ، وقم بالتبديل بين الأشكال المسطحة ، والمقعرة ، والمحدبة ، والمضغوطة ، وانسخ CSS. لا يوجد حساب ولا تحميلات ، ويستمر في العمل دون اتصال بمجرد تحميل الصفحة.
يستحق Neumorphism استخدامه بعيون واضحة حول نقطة ضعفه الرئيسية، وهي إمكانية الوصول. يعمل الأسلوب عن طريق وضع ظل فاتح وظل داكن على سطح بنفس لون خلفيته تقريبًا، لذلك يتم تحديد حافة التحكم من خلال اختلاف في النصوع بنسبة قليلة في المائة. يُقرأ على أنه أنيق لبعض المشاهدين وغير مرئي لأي شخص لديه حساسية تباين منخفضة، على شاشة خافتة، أو في الهواء الطلق. إنه يفشل WCAG 1.4.11، الذي يطلب نسبة 3:1 على حدود المكون التفاعلي. الحل الوسط المعتاد هو الحفاظ على نمط الأسطح الزخرفية وإعطاء العناصر التفاعلية الحقيقية حدودًا حقيقية أو حالة تركيز واضحة. ألوان الظل مشتقة من لون السطح هنا، لذلك ينتج السطح الداكن زوجًا مقلوبًا بشكل صحيح بدلاً من اللون الرمادي.
كيفية استخدام مولد CSS Neorphormism؟
1
اضبط لون السطح
اختر لون العنصر الخاص بك، والذي يجب أن يتطابق مع خلفية الصفحة خلفه - يعتمد الشكل الجديد على العنصر والصفحة التي تشترك في نفس اللون الأساسي.
2
ضبط الظلال
اضبط المسافة ، والطمس ، والشدة للتحكم في مدى رفع العنصر عن الصفحة ومدى قوة تباين الضوء / الظلام.
3
اختر شكلا
التبديل بين مسطح ، مقعر ، محدب ، ومضغوط. يستخدم الضغط على الظلال الداخلية لتبدو غارقة ، بينما يضيف التقعر والمحدب تدرجًا دقيقًا.
4
انسخ css
انسخ الكتلة التي تم إنشاؤها - نصف قطر الحدود والخلفية وظل الصندوق المقترن - والصقها على بطاقتك أو زرك أو اللوحة.
الميزات الرئيسية
ألوان الظل التلقائية
ظلال الظلال الفاتحة والداكنة مشتقة من لون السطح الخاص بك ، لذلك يبدو تأثير واجهة المستخدم الناعمة دائمًا متوازنًا دون تعديل يدوي
أربعة أشكال
مسطح ، مقعر ، محدب ، غطاء مضغوط مرتفع ومظهر غارق ، مع الضغط باستخدام الظلال الداخلية والغطاء / المحدب إضافة تدرج دقيق
السيطرة الكاملة
تتيح لك أشرطة التمرير لمسافة الظل والتشويش وكثافة التباين ونصف قطر الزاوية طلب التأثير من هناك إلى دراماتيكي
معاينة مباشرة
المعاينة تجلس على خلفية مطابقة بحيث تتم قراءة الظلال الناعمة بشكل صحيح ، ويتم تحديثها على الفور أثناء التحرير
Frequently Asked Questions
Neumorphism، أو واجهة المستخدم الناعمة، هو نمط تظهر فيه العناصر مبثوقة بهدوء من الخلفية باستخدام ظلين خفيين - ظلال فاتحة وظلال داكنة على زوايا متقابلة. يشترك العنصر في لون خلفيته مع الصفحة، وهو ما يخلق وهم السطح المرتفع أو المضغوط.
Related Tools
CGG
css
CSS Glassmorphism Generator
Create frosted-glass UI with a live preview and sliders for backdrop blur, transparency, saturation, color, and radius - then copy production-ready CSS.
CTS
css
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.
ABP
pdf
Add Blank Page to PDF
Insert a blank page at any position in your PDF document. Choose page size (A4, Letter, or match existing pages).
UAP
web
User Agent Parser
Paste a User-Agent string and read the browser, rendering engine, operating system, device type and CPU it describes, all in your browser.
Comments
0 comments
No comments yet. Be the first to share your thoughts!
neumorphism generatorsoft ui generatorneumorphic cssneumorphism csssoft ui cssneumorphic designcss soft shadowneumorphism button