منشئ CSS Box Shadow
ما هو CSS Box Shadow؟
تضيف خاصية CSS box-shadow تأثيرات الظل حول إطار العنصر. يمكن إزاحة الظلال وتضبيبها ونشرها وتلوينها وتعيينها كـ inset (ظل داخلي). يمكن تراكم ظلال متعددة مفصولة بفواصل للحصول على تأثيرات غنية. يتيح لك هذا المنشئ بناء ظلال متعددة الطبقات بصريًا ونسخ CSS الجاهز للصق إلى الحافظة.
كيفية استخدام منشئ Box Shadow
-
اضبط شرائح Offset X/Y والضبابية والانتشار لتحديد موضع الظل وشكله.
-
انقر على لوحة الألوان لاختيار لون الظل، واستخدم شريط Opacity للشفافية.
-
فعّل 'Inset' لإنشاء توهج داخلي أو تأثير ضغط.
-
انقر على '+ إضافة طبقة' لتراكم ظلال متعددة فوق بعضها.
-
انسخ CSS المُنشأ والصقه في ملف الأنماط الخاص بك.
الأسئلة الشائعة
ما الفرق بين box-shadow و drop-shadow filter؟ يضيف box-shadow ظلالاً حول صندوق حد العنصر المستطيل ويدعم الظلال الداخلية. يتم تطبيق CSS filter: drop-shadow() على الشكل البصري للعنصر (بما فيه الشفافية)، مما يجعله يتبع الحدود غير المستطيلة مثل ملفات PNG ذات الخلفيات الشفافة.
كيف أنشئ تأثير ارتفاع بطاقة Material Design؟ قم بتكديس ظليين box: ظل محيطي ناعم (طمس كبير، عتامة منخفضة، انتشار طفيف) وظل رئيسي (طمس أصغر، عتامة أعلى، إزاحة اتجاهية). على سبيل المثال: 0 2px 4px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08).
هل يؤثر box-shadow على تخطيط الصفحة؟ لا. لا يؤثر box-shadow على حجم العنصر أو موضعه في تدفق المستند. بخلاف outline، فإنه لا يشغل مساحة تخطيط ولن يدفع العناصر الأخرى حوله.
هل يمكن تحريك box-shadow؟ نعم. box-shadow قابل للتحريك مع CSS transitions و animations. لتحسين الأداء، يفضل تحريك box-shadow فقط عند الحاجة — لا يمكن للمتصفحات تسريع تغييرات box-shadow على GPU بكفاءة مثل transform أو opacity.
Keywords: منشئ CSS box shadow، box-shadow CSS، أداة ظل CSS، CSS drop shadow، ظل داخلي، ظل متعدد الطبقات، CSS shadow أونلاين