مولّد ظل CSS (box-shadow) — معاينة مباشرة

طريقة الاستخدام

1. اختر الإزاحة الأفقية والرأسية لتحديد موضع الظل.
2. اضبط التمويه والانتشار للتحكم في نعومة الظل وحجمه.
3. اختر اللون والعتامة، وفعّل الظل الداخلي لظل داخل العنصر.
4. راجع المعاينة المباشرة وانسخ تعريف box-shadow الناتج.

معنى القيم

الإزاحة الأفقية الموجبة تحرك الظل إلى اليمين، والسالبة إلى اليسار. والإزاحة الرأسية الموجبة تحركه إلى الأسفل، والسالبة إلى الأعلى. ويجب أن يكون التمويه صفرًا أو أكثر، وكلما كبر نعُمت الحافة. والانتشار الموجب يكبّر شكل الظل، والسالب يقلّصه.

تُكتب الألوان كقنوات RGB مع قيمة ألفا. فمثلًا تصبح العتامة 25% بالشكل rgba(0, 0, 0, 0.25). وتفعيل خيار الظل الداخلي يضع inset في بداية قيمة الظل.

مثال

box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.25); ينشئ ظلًا أسود ناعمًا مزاحًا ثماني بكسلات إلى الأسفل. والإزاحة الأفقية الصفرية تُبقيه متوازنًا بين اليسار واليمين.

لتجعل الظل أكثر إحكامًا، قارن بين انتشار سالب وقيمة تمويه أقل، فكل منهما يغيّر جزءًا مختلفًا من التأثير. وبالنسبة للظلال الداخلية، راجع النتيجة بالحجم النهائي للمكوّن، لأن المساحة الداخلية المتاحة تغيّر مقدار الظل المرئي.

الحدود والتطبيق

تتراوح الإزاحة والانتشار من -100 إلى 100 بكسل، والتمويه من 0 إلى 200 بكسل، والعتامة من 0 إلى 100%. ينشئ هذا المولّد ظلًا واحدًا، أما التأثيرات متعددة الطبقات فتتطلب تعديل CSS المنسوخ لإضافة قيم أخرى مفصولة بفواصل.

تستخدم المعاينة صندوقًا ثابت الحجم. وقد تغيّر أبعاد عنصرك الفعلي وانحناء زواياه وخلفيته وقواعد overflow في العناصر الأصلية مظهر الظل. والظل لا يحجز مساحة في التخطيط، فاترك مساحة كافية حول المكوّن النهائي عندما يمتد التأثير خارج حدوده.