تظليل

بودكاست CSS - 017: الظلال

لنفترض أنه قد تم إرسال تصميم لإنشائه وفي هذا التصميم توجد صورة لقميص، مقتص، مع ظل قطرات. يخبرك المصمم أن صورة المنتج ديناميكية ويمكن تحديثها عبر نظام إدارة المحتوى، لذلك يجب أن يكون الظل الخلفي ديناميكي أيضًا. بدلاً من قميص، يمكن أن تكون الصورة حافة أو سروالًا قصيرًا أو أي عنصر آخر. كيف يمكنك استخدام CSS لذلك؟

تحتوي CSS على السمتَين box-shadow و text-shadow، ولكن الصورة ليست نصًا، لذا لا يمكنك استخدام text-shadow. إذا استخدمت السمة box-shadow، سيظهر الظل على المربّع المحيط به، وليس حول القميص.

لحسن الحظ، هناك خيار آخر، وهو الفلتر drop-shadow(). يمكّنك هذا من القيام بالضبط بما طلبه المصمم. هناك الكثير من الخيارات عندما يتعلق الأمر بالظلال في CSS، وكل منها مصمم لحالة استخدام مختلفة.

ظل المربع

تُستخدم الخاصية box-shadow لإضافة ظلال إلى مربّع عنصر HTML. تعمل على عناصر الكتلة والعناصر المضمنة.

.my-element {
    box-shadow: 5px 5px 20px 5px #000;
}

يكون ترتيب قيم box-shadow كما يلي:

1. الإزاحة الأفقية: يدفع الرقم الموجب للخارج من اليسار والرقم السالب يعمل على إخراجه من اليمين.
2. الإزاحة العمودية: يدفع الرقم الموجب للأسفل من الأعلى، بينما يدفع الرقم السالب إلى أعلى من الأسفل.
3. نصف قطر التمويه: يؤدي العدد الأكبر إلى ظهور ظل أكثر تعتيمًا، بينما ينتج عن العدد الصغير ظل أكثر حدة.
4. نصف قطر الانتشار (اختياري): يؤدي العدد الأكبر إلى زيادة حجم الظل والعدد الأصغر لتقليله، مطابقًا لحجم نصف قطر التمويه في حال ضبطه على 0.
5. اللون: أي قيمة لون صالحة. وإذا لم يتم تحديد ذلك، سيتم استخدام لون النص المحسوب.

لجعل الظل الداخلي هو ظل داخلي، بدلاً من الظل الخارجي التلقائي، أضِف الكلمة الرئيسية inset قبل السمات الأخرى.

/* Outer shadow */
.my-element {
    box-shadow: 5px 5px 20px 5px #000;
}

/* Inner shadow */
.my-element {
    box-shadow: inset 5px 5px 20px 5px #000;
}

ظلال متعددة

يمكنك إضافة قدر ما تشاء من الظلال باستخدام ميزة "box-shadow". أضِف مجموعة قيم مفصولة بفواصل من أجل تحقيق ما يلي:

.my-element {
  box-shadow: 5px 5px 20px 5px darkslateblue, -5px -5px 20px 5px dodgerblue,
    inset 0px 0px 10px 2px darkslategray, inset 0px 0px 20px 10px steelblue;
}

الخصائص التي تؤثر في ظل المربع

ستؤثر إضافة border-radius إلى المربع أيضًا في شكل ظل المربع. وذلك لأن CSS تنشئ ظلاً بناءً على شكل المربع كما لو كان الضوء يشير إليه.

.my-element {
  box-shadow: 0px 0px 20px 5px darkslateblue;
  border-radius: 25px;
}

إذا كان المربّع الذي يتضمّن box-shadow مضمَّنًا في حاوية تتضمّن overflow: hidden، لن ينفصل الظل عن هذا الحدّ أيضًا.

<div class="my-parent">
  <div class="my-shadow">My shadow is hidden by my parent.</div>
</div>

.my-parent,
.my-shadow {
  width: 250px;
  height: 250px;
}

.my-shadow {
  box-shadow: 0px 0px 20px 5px darkslateblue;
}

.my-parent {
  overflow: hidden;
}

ظل النص

إنّ السمة text-shadow مشابهة جدًا للسمة box-shadow. تعمل فقط على العُقد النصية.

.my-element {
  text-shadow: 3px 3px 3px hotpink;
}

قيم text-shadow مماثلة لـ box-shadow وبالترتيب نفسه. الاختلاف الوحيد هو أنّ text-shadow لا يتضمّن قيمة spread ولا كلمة رئيسية inset.

عند إضافة box-shadow، يتم قصّها على شكل العلبة، ولكن لا تحتوي text-shadow على أي اقتصاص. هذا يعني أنه إذا كان النص الخاص بك شفافًا بالكامل أو شبه شفاف، فإن الظل يظهر من خلاله.

.my-element {
  text-shadow: 3px 3px 3px gold;
  color: rgb(0 0 0 / 70%);
}

ظلال متعددة

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

.my-element {
  text-shadow: 1px 1px 0px white,
    2px 2px 0px firebrick;
  color: darkslategray;
}

تظليل القطرات

للحصول على تظليل قطرات يتبع أي منحنيات محتملة للصورة، استخدِم فلتر drop-shadow في CSS. يتم تطبيق هذا الظل على قناع ألفا مما يجعله مفيدًا جدًا لإضافة ظل إلى صورة مقطوعة، كما هو الحال في مقدمة هذه الوحدة.

.my-image {
  filter: drop-shadow(0px 0px 10px rgba(0 0 0 / 30%))
}

يحتوي الفلتر drop-shadow على القيم نفسها المتوفّرة في box-shadow لكن الكلمة الرئيسية inset والقيمة spread غير مسموح بها. يمكنك إضافة أي عدد تريده من الظلال، عن طريق إضافة مثيلات متعددة لقيم drop-shadow إلى السمة filter. سيستخدم كل ظل الظل الأخير كنقطة مرجعية لتحديد الموضع.

التحقّق من استيعابك

اختبر معلوماتك عن الظلال