تعد خاصية box-shadow في لغة CSS أحد العناصر الأساسية لتحديد الأبعاد البصرية وعمق العناصر الواجهة في تصميم المواقع الإلكترونية. يتيح مولد الظل الصندوقي واجهة مرئية تتيح للمصممين ومطوري واجهات المستخدم ضبط خصائص الظل بدقة وتوليد الكود البرمجي فورًا.
يتم معالجة وتوليد جميع التأثيرات مباشرة في المتصفح الخاص بك؛ حيث يُعرض كل ظل في متصفحك، ولا يتم رفع أي إعداد تختاره هنا إلى BroBroGo.
فهم خصائص الظل الصندوقي في CSS
تتكون خاصية box-shadow من عدة قيم رقمية ولونية تحدد كيفية ظهور الظل حول العنصر أو داخله. لفهم كيفية عمل الأداة، يجب التعرف على دور كل خاصية:
- الإزاحة الأفقية: تتحكم في تحريك الظل على المحور الأفقي (X). تتراوح القيمة في الأداة بين -50px و 50px. تحرك القيم الموجبة الظل إلى اليمين، بينما تحركه القيم السالبة إلى اليسار.
- الإزاحة العمودية: تتحكم في تحريك الظل على المحور العمودي (Y). تتراوح القيمة بين -50px و 50px. تحرك القيم الموجبة الظل إلى الأسفل، في حين تحركه القيم السالبة إلى الأعلى.
- الطمس (Blur): يحدد مدى نعومة وتشتت حواف الظل. تتراوح القيمة من 0px (حواف حادة تمامًا) إلى 100px (حواف ناعمة ومشتتة للغاية).
- الانتشار: يحدد نمو أو تقلص حجم الظل قبل تطبيق تأثير الطمس عليه. يتراوح نطاق هذه القيمة بين -50px و 50px. تؤدي القيمة الموجبة إلى تكبير مساحة الظل، بينما تعمل القيمة السالبة على سحب الظل إلى الداخل.
- لون الظل والعتامة: يتيح منتقي الألوان تحديد درجة اللون، بينما يحدد شريط تمرير العتامة مدى شفافية الظل لتسهيل دمجه مع الخلفيات المختلفة.
تأثير الظل الداخلي مقابل الظل الخارجي
بشكل افتراضي، يظهر الظل خارج حدود العنصر، مما يعطي إيحاءً بأن العنصر يرتفع فوق الخلفية التي تقع خلفه. عند تفعيل خيار "ظل داخلي"، يتغير سلوك الظل تمامًا:
- الظل الخارجي (الافتراضي): يحاكي وجود مصدر ضوء يسقط على عنصر مرتفع، مما يلقي بظلاله على السطح السفلي. يُستخدم هذا النمط لتصميم البطاقات والأزرار العائمة.
- الظل الداخلي (Inset): يقوم بقلب الظل ليوجه إلى داخل حدود العنصر نفسه. يجعل هذا التأثير العنصر يبدو وكأنه غائر أو مضغوط داخل الصفحة، وهو أسلوب شائع عند تصميم حقول الإدخال النصية الغائرة أو الأزرار في حالتها النشطة (Pressed state).
تكديس طبقات متعددة لتحقيق العمق والواقعية
غالبًا ما تبدو الظلال الفردية أحادية الطبقة مسطحة وغير واقعية عند محاولة محاكاة الفيزياء الحقيقية للضوء. لحل هذه المشكلة، تدعم الأداة تكديس طبقات متعددة من الظلال.
يقوم المولد مسبقًا برسم خمس طبقات افتراضية؛ تكون الطبقة الأولى مرئية بقيم افتراضية هي 0 8 24 -4 وعتامة تبلغ 18% باللون الأسود الشفاف، بينما تكون الطبقات الأربع الأخرى مخفية في البداية.
عند النقر على زر "أضف طبقة"، يتم إنشاء طبقة ظل جديدة بقيم افتراضية. يتيح لك ذلك دمج عدة ظلال معًا:
- الطبقة الأولى (الضيقة): يمكن ضبطها بإزاحة صغيرة وطمس منخفض وعتامة أعلى لتحديد حافة العنصر بدقة (ظل ضيق وقريب).
- الطبقة الثانية (الواسعة): يمكن ضبطها بإزاحة أكبر وطمس مرتفع وعتامة منخفضة لمحاكاة تشتت الضوء الطبيعي على مسافة أبعد (ظل ناعم وأوسع).
عند دمج هذه الطبقات، يقوم المولد بدمج القيم وتصديرها في كود CSS كقيم مفصولة بفاصلة. يمكنك إزالة أي طبقة زائدة في أي وقت عبر تحديدها والنقر على زر "إزالة الطبقة".
كيفية استخدام واجهة المولد
تتميز واجهة "مولد الظل الصندوقي" بالبساطة والاستجابة الفورية للتعديلات:
| اسم الحقل في الواجهة | نوع التحكم | النطاق المتاح | الوظيفة |
|---|---|---|---|
| إزاحة أفقية | شريط تمرير | -50px إلى 50px | تحريك الظل يمينًا ويسارًا |
| إزاحة عمودية | شريط تمرير | -50px إلى 50px | تحريك الظل لأعلى ولأسفل |
| طمس | شريط تمرير | 0px إلى 100px | تنعيم حواف الظل |
| الانتشار | شريط تمرير | -50px إلى 50px | تكبير أو تصغير مساحة الظل |
| لون الظل | منتقي ألوان | كل الألوان | تحديد لون الظل |
| العتامة | شريط تمرير | 0 إلى 1 | تحديد درجة الشفافية |
| ظل داخلي | مفتاح تبديل | تفعيل / تعطيل | تحويل الظل إلى داخل العنصر |
بمجرد الوصول إلى النتيجة المطلوبة، يمكنك الانتقال إلى قسم "CSS" والنقر على زر "نسخ CSS" للحصول على الكود الجاهز للاستخدام مباشرة في ملفات الأنماط الخاصة بمشروعك.
الأسئلة الشائعة
ما الذي يتحكم به فعليًا الإزاحة والتمويه والانتشار؟
يعمل الإزاحة على تحريك الظل إلى اليسار/اليمين وإلى أعلى/أسفل، ويعمل التمويه على تنعيم حوافه، كما يؤدي الانتشار إلى زيادة حجمه أو تقليصه قبل التمويه. يؤدي الانتشار السلبي إلى سحب الظل إلى الداخل، وهو أمر مفيد للحصول على ظل ضيق وقريب.
ماذا يفعل خيار الظل الداخلي؟
وقع ظل طبيعي خارج العنصر، مثل الضوء خلف بطاقة مرفوعة. يقوم Inset بقلبه إلى الداخل بدلاً من ذلك، بحيث يبدو العنصر مضغوطًا - وهو مفيد للمدخلات الغائرة أو الأزرار المضغوطة.
لماذا تكديس أكثر من طبقة ظل واحدة؟
يبدو الظل الواحد مسطحًا بعد حجم معين. عادةً ما يجمع الارتفاع الحقيقي بين ظل داكن وضيق وظل ناعم وأوسع - أضف طبقة ثانية وقم بضبط كل منهما بشكل مستقل للحصول على هذا التأثير.