ظل الصندوق (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: المسافة horizontal للظل عن العنصر. تنقل القيم الموجبة الظل إلى اليمين، وتنقله القيم السالبة إلى اليسار.

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

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

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

color (اختياري): لون الظل. يمكن تحديده باستخدام ألوان مسمّاة أو قيم سداسية عشرية أو قيم 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 بإزاحة horizontal مقدارها 5px، وإزاحة vertical مقدارها 5px، ونصف قطر تمويه مقداره 10px، ولون gray. تحتوي العناصر ذات الفئة button على ظل box بإزاحة horizontal مقدارها 2px، وإزاحة vertical مقدارها 2px، ونصف قطر تمويه مقداره 5px، ونصف قطر انتشار مقداره 2px، ولون black شبه شفاف (rgba(0, 0, 0, 0.5)).

التحدي

سهل

يُعطى لك مستند HTML يحتوي على division (<div>) وparagraph (<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).

REQUIRED OUTPUT FORMAT: [Your translated content here]

جرّب بنفسك

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