شرح box-shadow في CSS — كيف تضيف الظلال بدون مبالغة؟

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

إذا كنت تبحث عن شرح box shadow في CSS أو أفضل قيم الظلال للبطاقات أو الفرق بين inset والظل الخارجي، فهذا الدرس يشرحها بشكل عملي.

ما هي box-shadow في CSS؟

box-shadow تضيف ظلاً خارج العنصر أو داخله. الظل الجيد يعطي ترتيباً بصرياً أوضح ويجعل التصميم أكثر احترافية.

التعريف البسيط: box-shadow in CSS تضيف عمقاً للعناصر عبر ظل ناعم أو واضح حسب الحاجة.

صيغة box-shadow في CSS

فهم ترتيب القيم

box-shadow: offset-x offset-y blur-radius spread-radius color;

• offset-x: تحريك الظل أفقياً.
• offset-y: تحريك الظل عمودياً.
• blur-radius: نعومة الظل.
• spread-radius: توسيع أو تقليص الظل (اختياري).
• color: لون الظل ويفضل غالباً rgba().

كيفية استخدام box-shadow في CSS

.card {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

ماذا يفعل هذا الكود؟ يضيف ظلاً ناعماً أسفل البطاقة.

النتيجة المتوقعة: بطاقة أكثر وضوحاً وعمقاً بدون إزعاج بصري.

خطأ شائع: استخدام لون ظل داكن جداً فيبدو التصميم ثقيلاً.

ظل الأزرار في CSS (Button Shadow)

.btn-main {
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.35);
}

ماذا يفعل هذا الكود؟ يبرز زر الإجراء الأساسي (CTA) بظل لوني ناعم.

النتيجة المتوقعة: الزر يصبح أوضح وأسهل للملاحظة.

خطأ شائع: مبالغة الظل فتظهر الواجهة قديمة.

الظل الداخلي باستخدام inset

عند إضافة inset يصبح الظل داخل العنصر بدلاً من خارجه.

.inset-box {
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.22);
}

ماذا يفعل هذا الكود؟ يعطي إحساس أن العنصر غائر للداخل.

النتيجة المتوقعة: تأثير مناسب لحقول الإدخال أو الصناديق الداخلية.

خطأ شائع: استخدام inset في كل العناصر فيختفي الهرم البصري.

متى أستخدم ظل خفيف ومتى ظل واضح؟

• استخدم ظلاً خفيفاً للعناصر العادية مثل البطاقات الثانوية.
• استخدم ظلاً أوضح للعناصر المهمة مثل CTA.
• حافظ على نظام ظلال ثابت داخل المشروع (2-3 مستويات فقط).

أخطاء شائعة في Box Shadow CSS

١) ظل داكن جداً: يسبب تشويشاً بصرياً.

٢) Blur كبير بدون حاجة: يجعل العناصر ضبابية أكثر من اللازم.

٣) عدم وجود نظام ثابت: كل عنصر بظل مختلف بشكل عشوائي.

الأسئلة الشائعة — FAQ (أسئلة بحثية شائعة)

ما هي خاصية box-shadow في CSS؟

خاصية لإضافة ظل حول العنصر أو داخله بهدف تحسين الشكل وإظهار العمق.

كيف أعمل ظل ناعم للبطاقات في CSS؟

استخدم قيمة blur متوازنة ولوناً شفافاً مثل rgba(0,0,0,.12).

ما الفرق بين الظل الخارجي والداخلي inset؟

الخارجي يظهر خارج العنصر، أما inset فيظهر داخله.

هل يمكن وضع أكثر من box-shadow في نفس العنصر؟

نعم، يمكن فصل الظلال بفاصلة للحصول على تأثير مركب.

ما أفضل إعداد box-shadow للأزرار؟

غالباً قيم معتدلة مثل 0 4px 12px rgba(13,110,253,.35) تعطي نتيجة جيدة.