في لغة CSS، تُستخدم خاصية `shadow` لإضافة ظلال للعناصر، سواء كانت هذه العناصر نصوصًا أو عناصر HTML بشكل عام (مثل مربعات، صور، إلخ). هناك نوعان رئيسيان من الظلال في CSS:

**1. ظل النص (Text Shadow):**

يُستخدم لإضافة ظل للنصوص فقط. يتم التحكم فيه بواسطة الخاصية `text-shadow`.

*   **بنية `text-shadow`:**

css

text-shadow: offset-x offset-y blur-radius color;

*   `offset-x`: الإزاحة الأفقية للظل. قيمة موجبة تُزيح الظل لليمين، وقيمة سالبة تُزيحه لليسار.

*   `offset-y`: الإزاحة الرأسية للظل. قيمة موجبة تُزيح الظل للأسفل، وقيمة سالبة تُزيحه للأعلى.

*   `blur-radius`: نصف قطر التمويه. قيمة اختيارية تُحدد مدى وضوح الظل. قيمة أكبر تعني تمويهًا أكبر. إذا كانت القيمة 0، يكون الظل حادًا.

*   `color`: لون الظل.

*   **أمثلة:**

```css

/* ظل بسيط */

h1 {

  text-shadow: 2px 2px black;

}

/* ظل مع تمويه */

p {

  text-shadow: 3px 3px 5px gray;

}

/* ظل مع إزاحة سالبة */

span {

  text-shadow: -2px -2px blue;

}

/* ظلال متعددة */

h2 {

  text-shadow: 1px 1px black, 0 0 5px blue;

}

*   **شرح المثال الأخير (ظلال متعددة):** يُمكن إضافة أكثر من ظل للنص بفصلها بفاصلة. في المثال الأخير، تم إضافة ظلين: الأول أسود بإزاحة بسيطة، والثاني أزرق مع تمويه.

**2. ظل الصندوق (Box Shadow):**

يُستخدم لإضافة ظل للعناصر الصندوقية (مثل `<div>`، `<span>`، `<img>`، إلخ). يتم التحكم فيه بواسطة الخاصية `box-shadow`.

*   **بنية `box-shadow`:**

css

box-shadow: inset offset-x offset-y blur-radius spread-radius color;

*   `inset`: كلمة مفتاحية اختيارية تجعل الظل يظهر داخل العنصر بدلاً من خارجه.

*   `offset-x`: الإزاحة الأفقية للظل.

*   `offset-y`: الإزاحة الرأسية للظل.

*   `blur-radius`: نصف قطر التمويه.

*   `spread-radius`: نصف قطر الانتشار. قيمة اختيارية تُحدد حجم الظل. قيمة موجبة تُكبر حجم الظل، وقيمة سالبة تُصغره.

*   `color`: لون الظل.


*   **أمثلة:**

```css

/* ظل بسيط */

div {

  box-shadow: 5px 5px gray;

}

/* ظل مع تمويه وانتشار */

img {

  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.3); /* لون مع شفافية */

}

/* ظل داخلي */

.inner-shadow {

  box-shadow: inset 3px 3px 5px rgba(0, 0, 0, 0.5);

}

/* ظلال متعددة */

button {

  box-shadow: 2px 2px 5px gray, -2px -2px 5px lightgray;

}

*   **ملاحظات هامة حول `box-shadow`:**

    *   إذا لم يتم تحديد `spread-radius`، يكون حجم الظل مساويًا لحجم العنصر.

    *   يُمكن استخدام قيم RGBa أو HSLa لتحديد لون الظل مع شفافية.

    *   يُمكن إضافة أكثر من ظل للعنصر بفصلها بفاصلة.

**الفرق الرئيسي بين `text-shadow` و `box-shadow`:**

*   `text-shadow` يُستخدم للنصوص فقط.

*   `box-shadow` يُستخدم للعناصر الصندوقية.

**استخدامات الظلال:**

*   إضافة عمق وواقعية للتصميم.

*   إبراز العناصر.

*   إنشاء تأثيرات ثلاثية الأبعاد.

*   تحسين تجربة المستخدم من خلال توفير ملاحظات بصرية.

باختصار، خاصية `shadow` في CSS تُوفر إمكانات قوية لإضافة ظلال جذابة للعناصر، مما يُحسن من مظهر وتجربة المستخدم في صفحات الويب.