مولّد ظل الصندوق (Box Shadow) وتدوير الحواف (Border Radius) لـ CSS

مولّد ظل الصندوق (Box Shadow) وتدوير الحواف (Border Radius) لـ CSS

🎨 مولّد مجاني لخصائص CSS box-shadow وborder-radius مع معاينة مباشرة. أنشئ ظلالًا جميلة، وزوايا مستديرة، وتأثيرات واجهة حديثة. انسخ الكود الجاهز لتصميم الويب.

خاصية Box Shadow

تضيف خاصية CSS box-shadow تأثيرات ظل حول إطار العنصر. يمكنك تعيين عدة تأثيرات مفصولة بفواصل. يتم وصف الظل بإزاحات X وY بالنسبة للعنصر، ونصف قطر التمويه والانتشار، واللون.

الصياغة (Syntax): box-shadow: [inset] [x-offset] [y-offset] [blur-radius] [spread-radius] [color];

معلمات الظل

• X-Offset (أفقي): القيم الموجبة تحرك الظل يمينًا، والسالبة يسارًا
• Y-Offset (عمودي): القيم الموجبة تحرك الظل للأسفل، والسالبة للأعلى
• نصف قطر التمويه (Blur): كلما زادت القيمة زاد التمويه. 0 يعني ظلًا حادًا
• نصف قطر الانتشار (Spread): القيم الموجبة توسّع الظل، والسالبة تقلّصه
• اللون: أي قيمة لون في CSS (hex, rgb, rgba, hsl)
• Inset: يحوّل الظل إلى ظل داخلي بدلًا من ظل خارجي

خاصية Border Radius

تقوم خاصية border-radius بتدوير زوايا الحافة الخارجية للعنصر. يمكنك تعيين نصف قطر واحد لزوايا دائرية، أو نصفَي قطر لزوايا بيضاوية.

الصياغة (Syntax): border-radius: [top-left] [top-right] [bottom-right] [bottom-left];

حالات استخدام شائعة

• البطاقات: ظل خفيف (0 4px 6px rgba(0,0,0,0.1)) مع نصف قطر متوسط (8px)
• الأزرار: ظل ملوّن مطابق للزر لإظهار العمق
• النوافذ المنبثقة (Modals): ظل كبير (0 20px 25px rgba(0,0,0,0.15)) ليبدو عائمًا
• الصور: أفاتار دائري (border-radius: 50%) أو صور مصغرة بحواف مستديرة (8–16px)
• حقول الإدخال: ظل داخلي لحالة الضغط/التركيز
• تصميم النيومورفيك: عدة ظلال (فاتح وداكن) مع خلفية متناسقة

أفضل الممارسات للظل

• استخدم ظلالًا خفيفة: شفافية 10–20% غالبًا كافية لإظهار العمق
• إزاحة Y أكبر من X: تحاكي إضاءة طبيعية من الأعلى
• تمويه أكبر للارتفاع: المزيد من التمويه = يبدو العنصر أعلى عن الصفحة
• طابق لون الظل: استخدم لون العنصر بشفافية منخفضة لانسجام أفضل
• الأداء: تجنّب تحريك box-shadow، استخدم opacity أو transform بدلًا من ذلك

أنماط ظل شائعة

• Material Design: 0 2px 4px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.14)
• Tailwind SM: 0 1px 2px 0 rgba(0,0,0,0.05)
• Tailwind MD: 0 4px 6px -1px rgba(0,0,0,0.1)
• Tailwind LG: 0 10px 15px -3px rgba(0,0,0,0.1)
• Bootstrap: 0 0.5rem 1rem rgba(0,0,0,0.15)

أنماط Border Radius

• بدون (0px): زوايا حادة، مظهر حديث وبسيط
• صغير (4px): تدوير خفيف لحقول الإدخال والأزرار
• متوسط (8px): معيار شائع للبطاقات والحاويات
• كبير (16px+): مظهر ودود وقريب
• كبسولة (999px أو 50%): نهايات مستديرة للوسوم والشارات
• دائرة (50%): أفاتار وأزرار أيقونات (يتطلب عنصرًا مربعًا)

تقنيات متقدمة

• ظلال متعددة: دمج عدة ظلال لتأثيرات طبقية
• تأثير التوهّج: 0 0 20px [color] بدون إزاحة
• Neumorphism: ظل فاتح أعلى-يسار وظل داكن أسفل-يمين
• حلقات التركيز (Focus Rings): ظل ملوّن لدعم الوصول (0 0 0 3px rgba(color,0.5))
• تأثير ثلاثي الأبعاد: عدة ظلال مع زيادة الإزاحة والتمويه تدريجيًا

دعم المتصفحات

خصيصتا box-shadow وborder-radius مدعومتان في جميع المتصفحات الحديثة. بالنسبة لـ IE8 وما قبله، يمكن استخدام بادئات (vendor prefixes) مثل (-webkit-box-shadow, -moz-box-shadow)، لكن نادرًا ما يلزم ذلك اليوم.

💡 نصيحة احترافية: لتأثيرات التحويم (hover)، لا تقم بتحريك box-shadow مباشرة لأنه مكلف. بدلًا من ذلك، أنشئ الظل على عنصر وهمي (::before أو ::after) وحرك شفافيته. ستحصل على نفس التأثير البصري مع أداء أفضل بكثير، خصوصًا على الأجهزة المحمولة!