| الخاصية أو المفهوم | طريقة العمل والتركيب البرمجي | الفائدة البصرية والاستخدام الشائع |
|---|---|---|
| box-shadow | تضيف تأثيراً ضوئياً أو ظلاً خفياً يحيط بصندوق العنصر لتجسيمه | تمنح التصميم عمقاً واقعياً يبرز البطاقات والأزرار فوق مستوى الصفحة كأنها ثلاثية الأبعاد |
| offset | تحدد اتجاه ومكان تحرك الظل على المحورين السيني والصادي | تحريك الظل لليمين أو اليسار وللأعلى أو الأسفل لمحاكاة اتجاه مصدر الضوء في التصميم |
| blur | تتحكم في درجة نعومة وانتشار الظل حيث أن القيمة صفر تعني ظلاً حاداً جداً | كلما زادت هذه القيمة أصبح الظل ناعماً ومشتتاً وأكثر واقعية ونعومة للعين |
| spread | قيمة اختيارية تزيد من المساحة الإجمالية التي يغطيها الظل أو تقلصها | تستخدم لتكبير حجم بقعة الظل المحيطة بالعنصر قبل أن تبدأ في التلاشي والضبابية |
| inset | كلمة دليلية اختيارية تقلب اتجاه الظل ليكون من الحواف نحو الداخل بدلاً من الخارج | تفيد في محاكاة العناصر المحفورة لأسفل أو الأزرار المضغوطة للداخل بدقة |
| الظلال المتعددة | تتيح دمج أكثر من ظل لعنصر واحد من خلال الفصل بين كود كل ظل بفاصلة عادية | تستخدم لبناء تأثيرات إضاءة متقدمة ومتدرجة غاية في الاحترافية والجمال |
| border-image | يتيح استخدام تدرج ألوان أو صورة خارجية كإطار للعنصر بدلاً من الألوان العادية | تستخدم بكثرة لتلوين حواف الأزرار والبطاقات بتدرج لوني جذاب مثل كود لينير جرادينت المتناسق |
| outline | إطار يحيط بالعنصر من الخارج تماماً لكنه لا يشغل أي مساحة ولا يؤثر على أبعاد الصندوق | أهمية قصوى في تسهيل التصفح لمستخدمي لوحة التوجيه كاشفاً للعنصر المحدد حالياً بقيمة فوكس دون تخريب التصميم |
**box-shadow** يُضيف ظلاً لأي عنصر. صياغته:
`box-shadow: [inset] offset-x offset-y [blur] [spread] color`
- **offset-x/y** — إزاحة الظل أفقياً وعمودياً - **blur** — ضبابية الظل (0 = حاد) - **spread** — توسيع أو تقليص الظل - **inset** — ظل داخلي بدلاً من خارجي - يمكن تعريف **ظلال متعددة** بفصلها بفاصلة
**border-image** يستبدل الحد التقليدي بصورة أو gradient: `border-image: linear-gradient(45deg, red, blue) 1;`
**outline** ← ليس جزءاً من الصندوق، لا يؤثر على التخطيط، مفيد جداً للـ focus indicator في الوصولية.
| 1 | /* ظل بسيط */ |
| 2 | box-shadow: 0 4px 12px rgba(0,0,0,0.1); |
| 3 | |
| 4 | /* ظلال متعددة */ |
| 5 | box-shadow: |
| 6 | 0 1px 3px rgba(0,0,0,0.12), |
| 7 | 0 8px 24px rgba(0,0,0,0.08); |
| 8 | |
| 9 | /* ظل داخلي */ |
| 10 | box-shadow: inset 0 2px 4px rgba(0,0,0,0.15); |
مثال 1: تأثير ارتفاع البطاقة (Card Elevation)
| 1 | .card { |
| 2 | box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.08); |
| 3 | transition: box-shadow 0.3s ease; |
| 4 | } |
| 5 | |
| 6 | .card:hover { |
| 7 | box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08); |
| 8 | transform: translateY(-2px); |
| 9 | } |
مثال 2: حد متدرج بـ border-image
| 1 | .gradient-border { |
| 2 | border: 3px solid transparent; |
| 3 | border-image: linear-gradient(135deg, #667eea, #764ba2) 1; |
| 4 | border-radius: 8px; /* لا يعمل مع border-image مباشرة */ |
| 5 | } |
| 6 | |
| 7 | /* بديل يعمل مع border-radius */ |
| 8 | .gradient-border-alt { |
| 9 | background: linear-gradient(white, white) padding-box, |
| 10 | linear-gradient(135deg, #667eea, #764ba2) border-box; |
| 11 | border: 3px solid transparent; |
| 12 | } |