جاري التحميل...

ظل الصندوق في CSS

العمل المتجاوب علّمك متى يتغيّر التخطيط. ظل الصندوق يفتح وحدة Effects & Motion: عمق ناعم حول بطاقة، إحساس ضغط داخل حقل، أو رفع هادئ لزر — كل ذلك بخاصية واحدة box-shadow، دون تغيير حجم الـ box model.

أجزاء الظل

📊 أجزاء box-shadow بنظرة

الجزء	المهمة اليومية
`offset-x` / `offset-y`	مكان الظل نسبةً إلى الصندوق (موجب = يمين / أسفل)
`blur-radius`	نعومة الحافة — `0` حاد؛ القيم الأكبر تنشر الحافة
`spread-radius`	اختياري؛ يكبّر أو يصغّر شكل الظل قبل الضبابية
`color`	غالباً `rgba(...)` ليبقى الظل شبه شفاف
`inset`	كلمة اختيارية — ترسم الظل داخل الصندوق
قوائم متعددة	ظلال مفصولة بفاصلة تتراكب (بعيد ناعم + قريب أوضح)

فكّر في الارتفاع، لا في زخرفة مبالغ فيها. طبقة ناعمة واحدة تحت البطاقة غالباً أفضل من ثلاث حواف صاخبة.

ارتفاع خارجي هادئ

وصفة شائعة للبطاقة: إزاحة صغيرة للأسفل، ضبابية متوسطة، انتشار قليل أو معدوم، وأسود (أو رمادي) شفاف. يجب أن يوحي الظل بضوء من الأعلى — لا بمستطيل أسود ملتصق خلف الصندوق.

ارتفاع هادئ للبطاقة

css

.card {
background: #fff;
border-radius: 0.75rem;
padding: 1.25rem;
box-shadow: 0 0.5rem 1.25rem rgba(15, 23, 42, 0.12);
}

offset-y الموجب يُسقط الظل أسفل الصندوق. أبقِ الألفا منخفضة حتى يبقى النص والجيران مقروءين.

inset — عمق داخل الصندوق

أضف الكلمة inset لرسم الظل إلى الداخل. مفيد للآبار، والأزرار المضغوطة، أو حقول الإدخال التي يجب أن تبدو غائرة قليلاً.

بئر inset لحقل

css

.field {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 0.5rem;
padding: 0.75rem 1rem;
box-shadow: inset 0 0.125rem 0.35rem rgba(15, 23, 42, 0.08);
}

inset لا يستبدل border أو padding — يغيّر فقط كيف يبدو سقوط الضوء داخل المنطقة المرسومة.

ظلال متعددة الطبقات

اكتب أكثر من ظل مفصولة بفواصل. طبقة بعيدة ناعمة مع طبقة أقرب وأضيق غالباً تُقرأ كارتفاع طبيعي دون إطار ثقيل.

رفع ناعم بطبقاتين

css

.panel {
background: #fff;
border-radius: 1rem;
box-shadow:
0 0.125rem 0.25rem rgba(15, 23, 42, 0.06),
0 0.75rem 1.5rem rgba(15, 23, 42, 0.1);
}

ترتيب القائمة هو ترتيب الرسم؛ وكلاهما ما يزالان لنفس العنصر. طبقتان هادئتان أفضل من لطخة معتمة واحدة.

إعادة ضبط، تمييز لوني، والتركيز على الصندوق

اضبط box-shadow: none عندما يجب أن يعود الحالة مسطّحة. ظل ملوّن يمكن أن يدعم لون العلامة التجارية — مع ضبابية ناعمة وألفا معتدلة. تذكّر: الحروف تستخدم text-shadow (تأثيرات النص)؛ الصناديق تستخدم box-shadow.

إعادة ضبط مسطّحة وتمييز ملوّن

css

.chip {
box-shadow: none;
}

.chip.is-accent {
box-shadow: 0 0.35rem 0.9rem rgba(37, 99, 235, 0.28);
}

جرّب بنفسك

أعطِ بطاقة بيضاء ظلاً خارجياً ناعماً واحداً (إزاحة x = 0، y صغيرة، ضبابية ≈1rem، ألفا منخفضة).
أضف ظل inset لحقل بحث ليبدو غائراً قليلاً.
رقِّ لوحاً إلى مكدس بطبقاتين (قريب + بعيد).
ابحث عن أي box-shadow أسود معتم في ملف تمرين وليّنه بـ rgba.
تأكد أن توهّج العنوان يستخدم text-shadow لا box-shadow.

أخطاء شائعة

ظلال سوداء معتمة تماماً تبدو كصناديق مكررة
التعامل مع blur و spread كنفس المقبض
وضع box-shadow على النص بينما تقصد text-shadow
تظليل كل عنصر قائمة ورابط وأيقونة حتى تبدو الصفحة ضبابية
نسيان inset عندما يحتاج التصميم إحساساً مضغوطاً أو مجوّفاً

ملخص

box-shadow يستخدم إزاحة، ضبابية، انتشار اختياري، لون، وinset اختياري
الظلال الخارجية الشفافة الناعمة تُقنع بارتفاع هادئ
رصّ طبقات مفصولة بفاصلة لعمق أغنى؛ استخدم none للتسطيح
الصندوق ≠ الحرف — اترك text-shadow للنص
التالي في Effects & Motion: Transitions

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع

❓

الأسئلة

🎯

70%

للنجاح

♾️

∞

الوقت

🔄

∞

المحاولات

📝 التعليمات

اقرأ كل سؤال بعناية
اختر أفضل إجابة لكل سؤال
يمكنك إعادة الاختبار عدة مرات كما تريد
سيتم عرض تقدمك في الأعلى

اللغة