مولد CSS box-shadow
مولد box-shadow يساعدك على بناء ظل CSS بصريا ثم نسخ القاعدة النهائية. يبدأ بظل واحد يحتوي على x وy وblur وspread واللون والشفافية، ويمكنك إضافة أكثر من طبقة للحصول على نتيجة أعمق. كل طبقة تتحول إلى جزء من خاصية box-shadow بصيغة مثل 4px 4px 8px 0px rgba(0,0,0,0.25)، وإذا فعّلت inset تصبح الطبقة داخل العنصر. المعاينة تتحدث مباشرة، ويمكن تغيير خلفية منطقة المعاينة لرؤية الظل على ألوان مختلفة.
ما معنى قيم الظل؟
قيمة x تحرك الظل أفقيا، وقيمة y تحركه عموديا. blur يحدد نعومة الحافة، وspread يوسع أو يقلص مساحة الظل قبل التمويه. اللون والشفافية يحددان قوة الظل، وinset ينقل الظل إلى داخل العنصر. الأداة تسمح بقيم سالبة لبعض المحاور حتى تحاكي الضوء القادم من اتجاه مختلف. عند نسخ CSS، يتم دمج الطبقات بفواصل، وهي الطريقة القياسية لإنشاء ظلال متعددة في CSS.
القوالب الجاهزة
توجد presets مثل subtle وmedium وlarge وdramatic وinset وcolored وmaterial وneon. القالب material مثلا يستخدم طبقتين لإحساس أقرب إلى التصميم المادي، بينما neon يستخدم ظلالا ملوّنة حول العنصر. هذه القوالب ليست قواعد ثابتة؛ استخدمها كنقطة بداية ثم عدّل blur والشفافية حسب حجم العنصر والخلفية. الظل المناسب لبطاقة كبيرة قد يبدو قويا جدا على زر صغير.
أين يفيد؟
يفيد مولد الظلال في تصميم البطاقات، القوائم المنسدلة، النوافذ، الصور، الأزرار والعناصر العائمة. يمكن استخدام الظل لتمييز الطبقات البصرية أو لإعطاء feedback عند hover. لكنه يجب أن يخدم الواجهة لا أن يشتت المستخدم. في واجهات العمل الكثيفة، الظلال الخفيفة غالبا أفضل من الظلال الدرامية، لأنها تترك النصوص والجداول أكثر وضوحا.
حدود وأداء
الظلال الكبيرة والمتعددة قد تؤثر على الأداء إذا استخدمت بكثرة أو مع animation مستمرة. كما أن الظل يعتمد على الخلفية؛ نفس القيم قد تبدو ممتازة على رمادي فاتح وضعيفة على خلفية داكنة. اختبر CSS على أحجام شاشة مختلفة، وتأكد من أن الظل لا يقطع بسبب overflow hidden في الحاويات. عند بناء design system، وثّق عدة مستويات ظل بدلا من إنشاء قيمة عشوائية لكل مكون.
مثال تطبيقي
لإنشاء بطاقة خفيفة، ابدأ بقيم صغيرة مثل 0px 4px 8px وشفافية منخفضة. إذا احتجت إلى عنصر عائم مثل قائمة أو modal، زد blur وy تدريجيا. لا تبدأ بظل قوي؛ من الأسهل تقوية ظل هادئ من إصلاح واجهة مليئة بظلال ثقيلة. عند استخدام أكثر من طبقة، اجعل إحداها قريبة وحادة نسبيا والأخرى أبعد وأنعم حتى يظهر العمق بشكل طبيعي.
وعند النسخ إلى CSS، احفظ القاعدة كاملة مع الفاصلات بين الطبقات حتى لا يفقد المتصفح إحدى الظلال.
طبقات الظل وخروج CSS
يسمح مولد box-shadow بإنشاء طبقة ظل واحدة أو أكثر. لكل طبقة قيم X وY وblur وspread ولون وشفافية وخيار inset. تتحول هذه القيم إلى صيغة CSS مثل `xpx ypx blurpx spreadpx rgba(...)`، وإذا كان خيار inset مفعلا يضاف قبل القيم. يمكن إضافة طبقات جديدة، حذف الطبقات الزائدة، أو استخدام presets مثل subtle وmedium وlarge وdramatic وinset وcolored وmaterial وneon. المعاينة تحدث مباشرة على صندوق أبيض داخل مساحة يمكن تغيير لون خلفيتها.
قيمة X تحرك الظل يمينا أو يسارا، وقيمة Y تحركه إلى أسفل أو أعلى، وblur يحدد نعومة الحواف، وspread يوسع أو يقلص مساحة الظل قبل التمويه. الشفافية تتحول إلى alpha داخل rgba، لذلك 25% تصبح 0.25 تقريبا. زر النسخ يأخذ القاعدة كاملة `box-shadow: ...;` مع كل الطبقات مفصولة بفواصل. عند استخدام الظلال في واجهة فعلية، اجعلها جزءا من نظام ثابت: ظل خفيف للبطاقات، أوضح للقوائم المنبثقة، وأقوى للعناصر العائمة. الظلال الكبيرة جدا قد تبدو مزعجة وتؤثر في الأداء إذا تكررت على عناصر كثيرة.
التعليقات