Neumorphism CSS Shadow — كود ذو طبقتين
أنشئ تعليمات برمجية لظل مربع CSS بشكل مرئي: أشرطة تمرير للإزاحة والتمويه والانتشار واللون مع العتامة والوضع الداخلي وما يصل إلى أربع طبقات مع معاينة مباشرة.
النتيجة
تفتح هذه الصفحة المولد بزوج نيومورفيك كلاسيكي تم إنشاؤه بالفعل: طبقة خفيفة إزاحة −8px/−8px باللون الأبيض القريب وطبقة داكنة إزاحة 8px/8px باللون الرمادي والأزرق الصامت، وكلاهما غير واضح 16px. قم بالتبديل بين الطبقتين في قائمة الطبقات لضبط كل جانب بشكل مستقل.
النيومورفيسم (واجهة المستخدم الناعمة) هو النمط المنقوش الذي بلغ ذروته في عام 2020 تقريبًا: تبدو العناصر منبثقة من الخلفية بدلاً من أن تطفو فوقها. بصراحة، يأتي مع مقايضات حقيقية - التأثير يعمل فقط عندما تتطابق خلفية العنصر مع خلفية الصفحة، ويمكن أن تضر الحواف منخفضة التباين بإمكانية الوصول - لذلك تستخدمه معظم الفرق الآن كلكنة، وليس لغة تصميم كاملة.
إذا كان النمط يناسب مشروعك، فإن هذا الإعلان المكون من طبقتين هو نقطة البداية الأساسية: انسخ CSS، واضبط العنصر وخلفية الصفحة على نفس اللون الرمادي الناعم، وأضف نصف قطر حدود مطابقًا. كل شيء يعمل محليًا في متصفحك.