ظل الصندوق (Box Shadow)

جزء من قسم Styling with CSS في رحلة HTML على Coddy — الدرس 42 من 76.

في CSS، تُستخدم خاصية box-shadow لإضافة تأثيرات الظل إلى صندوق العنصر. تتيح لك هذه الخاصية إنشاء تأثيرات جذابة بصرياً تجعل العناصر تبدو وكأنها "تنبثق" من الصفحة أو تخلق عمقاً وأبعاداً.

إليك الصيغة الأساسية لاستخدام خاصية box-shadow:

selector {
    box-shadow: horizontal-offset vertical-offset blur spread color inset;
}

horizontal-offset: المسافة الأفقية للظل عن العنصر. القيم الموجبة تحرك الظل إلى اليمين، والقيم السالبة تحركه إلى اليسار.

vertical-offset: المسافة الرأسية للظل عن العنصر. القيم الموجبة تحرك الظل للأسفل، والقيم السالبة تحركه للأعلى.

blur (اختياري): نصف قطر تمويه الظل. تؤدي القيمة الأكبر إلى إنشاء ظل أكثر تمويهاً. إذا تم حذفه، فإنه يتم تعيينه افتراضياً إلى 0 (بدون تمويه).

spread (اختياري): نصف قطر انتشار الظل. تؤدي القيم الموجبة إلى توسيع الظل، بينما تؤدي القيم السالبة إلى تقليصه.

color (اختياري): لون الظل. يمكن تحديده باستخدام أسماء الألوان، أو القيم الست عشرية (hexadecimal)، أو قيم RGB، أو قيم HSL.
inset (اختياري): يغير الظل من ظل خارجي (outset) إلى ظل داخلي.

على سبيل المثال:

div {
    box-shadow: 5px 5px 10px gray;
}

.button {
    box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.5);
}

في هذا المثال، تمتلك جميع عناصر <div> ظل صندوق (box shadow) بإزاحة أفقية قدرها 5px، وإزاحة رأسية قدرها 5px، ونصف قطر تمويه قدره 10px، ولون رمادي. أما العناصر التي تملك الفئة button فلها ظل صندوق بإزاحة أفقية قدرها 2px، وإزاحة رأسية قدرها 2px، ونصف قطر تمويه قدره 5px، ونصف قطر انتشار قدره 2px، ولون أسود شبه شفاف (rgba(0, 0, 0, 0.5)).

التحدي

سهل

لقد تم تزويدك بمستند HTML يحتوي على قسم (<div>) وفقرة (<p>). مهمتك هي استخدام خاصية box-shadow لإضافة تأثيرات الظل لهذه العناصر. اتبع الخطوات أدناه:

اكتب قاعدة CSS تستهدف عنصر <div>. قم بتعيين box-shadow إلى 10px 10px 5px gray.
اكتب قاعدة CSS تستهدف عنصر <p>. قم بتعيين box-shadow إلى -5px -5px 10px 2px rgba(0, 0, 0, 0.7).

ورقة مرجعية

تضيف خاصية box-shadow تأثيرات الظل إلى العناصر:

selector {
    box-shadow: horizontal-offset vertical-offset blur spread color inset;
}

horizontal-offset: المسافة الأفقية (موجب = يمين، سالب = يسار)
vertical-offset: المسافة الرأسية (موجب = أسفل، سالب = أعلى)
blur (اختياري): نصف قطر التمويه (أكبر = تمويه أكثر)
spread (اختياري): نصف قطر الانتشار (موجب = توسيع، سالب = تقليص)
color (اختياري): لون الظل
inset (اختياري): ينشئ ظلاً داخلياً بدلاً من الخارجي

div {
    box-shadow: 5px 5px 10px gray;
}

.button {
    box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.5);
}

جرّب بنفسك

<html>
<head>
    <title>Box Shadow</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div>This is a division with a box shadow.</div>
    <br>
    <p>This is a paragraph with a box shadow.</p>
</body>
</html>