مولّد الظل box-shadow في CSS

كيفية استخدام مولّد الظل

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

لوحة المفاتيح: حدّد النقطة في لوحة الإزاحة واستخدم مفاتيح الأسهم لتحريكها 1 px، أو 10 px مع Shift.

كيف تعمل خاصية box-shadow؟

صيغة الظل الواحد هي box-shadow: [inset] x y blur spread color.

• x وy تحرّكان الظل إلى اليمين وإلى الأسفل، والقيم السالبة تحرّكه إلى اليسار وإلى الأعلى. مصدر الضوء فوق العنصر يعني قيمة y موجبة.
• التمويه يليّن حافة الظل، ولا يمكن أن يكون سالبًا. والتمويه 0 يعطي نسخة حادة الحواف من الصندوق.
• الانتشار يكبّر الظل (بقيمة موجبة) أو يصغّره (بقيمة سالبة) قبل تمويهه. والانتشار السالب مع قيمة y كبيرة يُبقي الظل تحت العنصر بدلًا من أن يحيط به.
• اللون يحمل الشفافية عادةً. تكتب هذه الأداة الألوان المعتمة بصيغة HEX والألوان شبه الشفافة بصيغة rgba() التي تفهمها كل المتصفحات. وإذا كتبت لونًا فيه قناة ألفا أصلًا، فإن العتامة (%) تُضرب فيها.
• inset يضع الظل داخل الحدود، كأن الصندوق مضغوط داخل الصفحة.

يتبع الظل قيمة border-radius للعنصر ولا يغيّر التخطيط أبدًا: فهو لا يشغل مساحة ولا يُظهر أشرطة تمرير.

لماذا نكدّس عدة ظلال؟

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

تُرسم الطبقة الأولى في القائمة فوق الطبقات الأخرى، تمامًا كما في قيمة CSS. ويهمّ الترتيب خصوصًا عندما تمزج الظلال الداخلية والخارجية أو تستخدم ألوانًا قوية.

النيومورفيزم (Neumorphism)

يستخدم النيومورفيزم (أو «الواجهة الناعمة») ظلّين على عنصر لونه مطابق للون خلفيته: ظل داكن مُزاح إلى الأسفل واليمين، وظل فاتح مُزاح إلى الأعلى واليسار. يضبط النمط نيومورفيزم اللونين على #e0e5ec. وتذكّر أن هذا الأسلوب منخفض التباين، لذا تحتاج الأزرار المصمَّمة به إلى حالة تركيز واضحة وتسميات مقروءة.