تظليل

The CSS Podcast - 017: Shadows

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

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

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

ظل الصندوق

Browser Support

• 10
• 12
• 4
• 5.1

Source

تُستخدَم السمة 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;
}

السمات التي تؤثّر في box-shadow

ستؤثّر إضافة 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;
}

ظل النص

Browser Support

• 2
• 12
• 3.5
• 1.1

Source

تتشابه سمة 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;
}

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

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

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

مصطلح رئيسي: سنتناول فلاتر CSS في وحدة أخرى، ولكن باختصار، تتيح لك الفلاتر تطبيق تأثيرات رسومية متعددة على وحدات البكسل للعنصر.

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

التحقّق من فهمك

اختبِر معلوماتك حول الظلال

أي قيمة ظلّ أدناه فريدة لـ box-shadow؟

الإزاحة الأفقية

يُرجى إعادة المحاولة.

الميل العمودي

يُرجى إعادة المحاولة.

نصف قطر التمويه

يُرجى إعادة المحاولة.

نصف قطر الانتشار

🎉

اللون

يُرجى إعادة المحاولة.

inset

يُرجى إعادة المحاولة. inset هي كلمة رئيسية فريدة أيضًا في box-shadow.

يُسمح بإضافة 13 ظلّ مربّعًا فقط إلى عنصر في المرة الواحدة.

True

ما مِن حدّ رسمي.

خطأ

أضِف أي عدد تريده من الظلال المتعدّدة للمربّعات.