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

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

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

إليك بناء الجملة الأساسي لاستخدام الخاصية box-shadow:

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

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

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

blur (اختياري): نصف قطر الضبابية لـ shadow. القيمة الأكبر تنشئ ضبابية أكثر لـ shadow. إذا تم إغفاله، فإن قيمته الافتراضية تكون 0 (بدون blur).

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

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) مع إزاحة أفقية horizontal قدرها 5px، وإزاحة رأسية vertical قدرها 5px، ونصف قطر ضبابية blur قدره 10px، ولون رمادي gray. أما العناصر التي تحمل الفئة button فتحتوي على ظل صندوقي مع إزاحة أفقية horizontal قدرها 2px، وإزاحة رأسية vertical قدرها 2px، ونصف قطر ضبابية blur قدره 5px، ونصف قطر انتشار spread قدره 2px، ولون أسود black شبه شفاف (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).

جرّب بنفسك

<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>