في هذا الدرس 7تصفّح المواضيع
تمنح خاصية box-shadow بطاقات الواجهة والأزرار عمقاً بصرياً واضحاً يميز الطبقات التفاعلية عن خلفية الصفحة. وتبدأ صيغتها الأساسية بقيمتي إزاحة إلزاميتين يتبعهما نصف قطر التمويه واللون بصورة offset-x offset-y blur-radius color:
- الإزاحة الأفقية
offset-xتدفع الظل يميناً بالقيم الموجبة ويساراً بالقيم السالبة. - الإزاحة الرأسية
offset-yتدفع الظل للأسفل بالقيم الموجبة وللأعلى بالقيم السالبة. - نصف قطر التمويه
blur-radiusيرسم حافة حادة عند0، وتزداد نعومته وتلاشيه كلما كبرت القيمة مثل20pxولا يقبل قيماً سالبة. - اللون الشفاف عبر
rgba(15, 23, 42, 0.12)ينتج ظلالاً هادئة وواقعية بدلاً من الأسود المصمت القاسي.
يمثل الرقم الطولي الرابع معامل الانتشار spread-radius قبل تطبيق التمويه بصيغة offset-x offset-y blur-radius spread-radius color. توسع القيم الموجبة مساحة الظل من الجهات الأربع، بينما تعمل القيمة السالبة للانتشار مثل -8px على تقليص الظل وحصره أسفل البطاقة ليمنح إيحاءً احترافياً بارتفاع العنصر عن السطح دون تلويث الحافة العلوية بهالة رمادية.
.card-elevated {
padding: 20px;
border-radius: 12px;
background-color: #ffffff;
box-shadow: 0 18px 26px -8px rgba(15, 23, 42, 0.22);
}تقلب الكلمة المفتاحية inset اتجاه الرسم من ظل خارجي إلى ظل داخلي غائر يرتسم داخل حدود الإطار مباشرة فوق خلفية الصندوق وتحت نصوصه. ويُستثمر هذا الأسلوب بكثرة في حقول الإدخال النصية ومسارات المؤشرات وحالة الضغط الفعلي :active على الأزرار.
.text-well {
padding: 12px 14px;
border: 1px solid #cbd5e1;
border-radius: 8px;
box-shadow: inset 0 2px 6px rgba(15, 23, 42, 0.16);
}نادراً ما تنتج الإضاءة الطبيعية في الواقع ظلاً منفرداً مسطحاً؛ ولذلك تسمح box-shadow بدمج عدة ظلال مفصولة بفواصل مثل ظل تلامس قريب 0 2px 4px rgba(15, 23, 42, 0.08) مع ظل محيطي أوسع 0 12px 24px rgba(15, 23, 42, 0.12) لمحاكاة التدرج الضوئي الطبيعي.
كما يُستثمر تعدد الظلال بصفر إزاحة وصفر تمويه لبناء حلقات تركيز مزدوجة عالية التباين عند حالة :focus مثل 0 0 0 2px #ffffff, 0 0 0 5px #7750b2، فتلتف بدقة حول الزوايا المدورة للأزرار دون أن تستهلك أي مساحة إضافية في التخطيط.
على خلاف الإطار border الذي يدخل ضمن حساب أبعاد الصندوق الفيزيائية، يُعد ظل الصندوق تأثيراً مرسوماً خالصاً خارج حسابات التخطيط؛ فإضافة ظل بعرض 30px أو إلغاؤه بالقيمة none لا يدفع البطاقات المجاورة ولا يغير عرض العنصر إطلاقاً. ومع ذلك، احرص على منح الحاوية الأب حشوة داخلية كافية عبر padding كي لا ينبتر الظل الممتد عند حدود حاوية تحمل overflow: hidden.
مختبر ظلال الصناديق التفاعلي
في أنظمة التصميم الثنائية اللغة بين العربية والإنجليزية، يضمن ضبط الإزاحة الأفقية على الصفر مثل 0 10px 24px rgba(15, 23, 42, 0.12) توحيد مصدر الإضاءة العلوي بحيث تبدو البطاقات متوازنة تماماً في الاتجاهين. ولا تحتاج لعكس الإزاحة الأفقية بين 8px و-8px إلا في القوائم الجانبية المثبتة على حافة الشاشة ليسقط ظلها دائماً باتجاه محتوى الصفحة.
عند جمع رفع خفيف للأعلى عبر transform: translateY(-4px) مع تعميق ظل البطاقة داخل خاصية transition ناعمة، تحصل على استجابة بصرية حيوية وواضحة عند تمرير المؤشر أو التركيز بلوحة المفاتيح.
.lift-card {
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.lift-card:hover {
transform: translateY(-4px);
box-shadow: 0 16px 28px -6px rgba(15, 23, 42, 0.22);
}| المعامل | الإلزامية | القيم المقبولة والأثر البصري |
|---|---|---|
inset | اختياري | يعكس الظل ليرتسم غائراً داخل حدود الصندوق |
offset-x | إلزامي | الإزاحة الأفقية، والقيمة 0 توازن الاتجاهين العربي والإنجليزي |
offset-y | إلزامي | الإزاحة الرأسية، والقيمة الموجبة تسقط الظل للأسفل |
blur-radius | اختياري | القيمة 0 حادة، والقيم الموجبة تزيد نعومة التلاشي |
spread-radius | اختياري | الموجب يوسع الحلقة، والسالب يحصر الظل أسفل البطاقة |
color / none | اختياري | تضبط rgba() شفافية الظل، وتزيل none الظلال تماماً |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
في ملخص الدرس أتقنت توظيف خاصية box-shadow بجميع معاملاتها من الإزاحة والتمويه والانتشار السالب والظلال الغائرة inset إلى حلقات التركيز الدائرية وتحريك ارتفاع البطاقات. وفي الخطوة التالية ستنتقل إلى درس المرشحات البصرية في لغة CSS لمعالجة الصور والأيقونات المفرغة وتصميم أسطح الزجاج الضبابي.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Blur Radius نصف قطر التمويه
- مسافة غير سالبة تحدد درجة نعومة وتلاشي حواف الظل حول الصندوق.
- للمراجعة
- 02 Spread Radius نصف قطر الانتشار
- المعامل الطولي الرابع الذي يوسع مساحة الظل بالقيم الموجبة أو يقلصها أسفل البطاقة بالقيم السالبة.
- للمراجعة
- 03 Inset Shadow الظل الداخلي الغائر
- ظل يُرسم داخل حدود الإطار ليمنح حقول الإدخال والأزرار المضغوطة إيحاءً واقعياً بالعمق الغائر.
- للمراجعة
- 04 Zero-Shift Focus Ring حلقة التركيز الثابتة
- ظل بصفر تمويه وانتشار موجب عند حالة التركيز يحيط بالزوايا المدورة دون زحزحة العناصر المجاورة.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات3
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 RGBA RGBA
- Red Green Blue Alpha
- صيغة لونية مزودة بقناة شفافية ضرورية لرسم ظلال هادئة وطبيعية غير قاسية.
- للمراجعة
- 02 RTL RTL
- Right-to-Left
- اتجاه الواجهات العربية من اليمين إلى اليسار حيث تحافظ الإزاحة الأفقية الصفرية على توازن الإضاءة.
- للمراجعة
- 03 GPU GPU
- Graphics Processing Unit
- وحدة المعالجة الرسومية المسؤولة عن رسم ودمج طبقات الظلال المموهة على الشاشة.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
طبّق خاصية box-shadow بالقيم 0 18px 26px -8px مع لون rgba هادئ وحركة رفع ناعمة عند التمرير.
-
ادمج طبقتي ظل مفصولتين بفاصلة وصفر تمويه عند حالة التركيز لإبراز الأزرار المدورة لمستخدمي لوحة المفاتيح.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.