الزوايا والظلال في CSS: border-radius و box-shadow

الدرس 14 من 19 · CSS

قارن بين موقع قديم وموقع حديث، وستجد الفرق في تفاصيل صغيرة: زوايا ناعمة بدلاً من الحادة، وظل خفيف يرفع البطاقة عن الخلفية. هذه التفاصيل لا تحتاج صوراً ولا برامج تصميم، بل بضع خصائص CSS. في هذا الدرس ستتعلمها وتعرف كيف تستخدمها باعتدال.

تدوير الزوايا: border-radius

عرفت هذه الخاصية سريعاً في درس نموذج الصندوق. القيمة هي نصف قطر الدائرة التي تُرسم بها الزاوية: كلما كبرت صارت الزاوية أنعم.

.card   { border-radius: 12px; }
.button { border-radius: 8px; }

والخاصية تعمل حتى لو لم يكن للعنصر إطار. يكفي أن تكون له خلفية لترى أثرها.

قيمة لكل زاوية

يمكنك أن تعطي أربع قيم، وتبدأ من الزاوية العليا اليسرى ثم تدور مع عقارب الساعة:

.tab {
  border-radius: 12px 12px 0 0;
}

هذا تبويب: زاويتاه العلويتان دائريتان، والسفليتان حادتان.

الدائرة والكبسولة

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

.pill {
  border-radius: 999px;
}

50% على عنصر مربع تعطي دائرة كاملة. وإذا كان مستطيلاً أعطت شكلاً بيضاوياً.
رقم كبير جداً مثل 999px يعطي شكل الكبسولة: طرفان نصف دائريين مهما كان طول العنصر. وهو الشكل المعروف للشارات والوسوم.

ظل الصندوق: box-shadow

.card {
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.15);
}

القيم بالترتيب:

القيمة	معناها
`0`	الإزاحة الأفقية: موجبة تحرك الظل يميناً
`4px`	الإزاحة الرأسية: موجبة تحرك الظل إلى الأسفل
`12px`	التمويه: كلما زاد صار الظل أنعم وأوسع
اللون	لون الظل، ويكون غالباً أسود شفافاً

تخيّل مصباحاً فوق ورقة مرفوعة عن الطاولة: كلما ارتفعت الورقة ابتعد ظلها عنها واتسع وبهت. بهذا تعطي العين إحساساً بأن البطاقة مرتفعة عن الصفحة.

قيم إضافية

/* قيمة رابعة: الانتشار، تكبّر الظل من كل الجهات */
.glow {
  box-shadow: 0 0 0 4px rgb(91 91 240 / 0.3);
}

/* inset: الظل داخل العنصر */
.pressed {
  box-shadow: inset 0 2px 6px rgb(0 0 0 / 0.2);
}

/* أكثر من ظل، بينها فاصلة */
.soft {
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.1), 0 8px 24px rgb(0 0 0 / 0.1);
}

المثال الأول بلا إزاحة ولا تمويه، فيظهر حلقة ملونة حول العنصر.
inset تجعل العنصر يبدو محفوراً أو مضغوطاً.
جمع ظلين، قريب حاد وبعيد ناعم، يعطي نتيجة أقرب إلى الظل الحقيقي.

ظل النص: text-shadow

يشبه ظل الصندوق، لكن بثلاث قيم ولون: الإزاحة الأفقية، والرأسية، والتمويه.

.hero-title {
  color: white;
  text-shadow: 0 2px 6px rgb(0 0 0 / 0.6);
}

وأنفع استخدام له توضيح نص أبيض مكتوب فوق صورة. استخدمه بحذر، لأن ظل النص الثقيل يصعّب القراءة.

خط التحديد: outline

outline خط يُرسم خارج الإطار. ويختلف عن border في نقطة مهمة: لا يأخذ مساحة، فلا يغيّر حجم العنصر ولا يحرك ما حوله.

button:focus-visible {
  outline: 3px solid #5b5bf0;
  outline-offset: 2px;
}

outline-offset: مسافة بين الخط وحافة العنصر.
:focus-visible: حالة العنصر عندما يصل إليه المستخدم بلوحة المفاتيح.

المتصفح يرسم هذا الخط تلقائياً حول العنصر المحدَّد، ليعرف من يتنقل بمفتاح Tab أين هو الآن.

جرّب بنفسك

غيّر قيم الظل في الكلاس card وراقب النتيجة: اجعل الإزاحة الرأسية 20px، ثم اجعل التمويه 0. بعدها اضغط داخل صندوق النتيجة واضغط Tab لترى خط التحديد حول الزر:

جرّب بنفسكCSS

أو اضغط Ctrl + Enter

الناتج

أخطاء شائعة

دائرة مشوّهة: border-radius: 50% تعطي دائرة فقط إذا تساوى العرض والارتفاع.
ظل ثقيل: لون أسود كامل بلا شفافية يظهر كبقعة داكنة. استخدم rgb(0 0 0 / 0.15) أو قريباً منها.
ظلال على كل شيء: إذا كان لكل عنصر ظل فلن يبرز أي عنصر. اجعل الظل للبطاقات والعناصر المرتفعة فقط.
حذف outline بلا بديل: مستخدم لوحة المفاتيح يضيع في الصفحة.

اختبر نفسك

سؤال

في box-shadow: 0 8px 20px gray ماذا تمثل القيمة 20px؟

سؤال

ما الفرق الأساسي بين outline و border؟

الخلاصة

border-radius تنعّم الزوايا، و 50% على مربع تصنع دائرة، و 999px تصنع كبسولة.
box-shadow قيمها: إزاحة أفقية، ثم رأسية، ثم تمويه، ثم لون.
inset تجعل الظل داخلياً، ويمكن جمع أكثر من ظل بفاصلة.
text-shadow لظل النص، ويفيد فوق الصور.
outline يحدد العنصر النشط للوحة المفاتيح: غيّر شكله ولا تحذفه.

عن مدرسة البرمجة

مدرسة البرمجة موقع عربي مجاني لتعليم البرمجة من الصفر، بدروس منظمة وأمثلة تجربها بنفسك. هدفنا أن يتعلم كل عربي البرمجة بلغته، خطوة بخطوة.