تظليل

بودكاست 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;
}

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

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

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

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

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

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