مولّد ظل الصندوق في CSS
اسحب المنزلقات وانسخ CSS.
- يعمل في متصفحك — ولا يُرسل نصك إلى أي مكان
- دون تسجيل، ودون حصص، ومجاني بالقدر الذي تريده
كيف يعمل
يأخذ box-shadow أربعة أرقام ولونًا بترتيب محدد، والفرق بين ظل يوحي بالعمق وآخر يوحي بملصق يكمن كله في هذه الأرقام. ومشاهدته يتغير أثناء السحب أسرع بكثير من التخمين.
ماذا تعني الأرقام الأربعة
بالترتيب: الإزاحة الأفقية، والإزاحة الرأسية، ونصف قطر التمويه، والانتشار. تحرّك الإزاحتان الظل؛ ويلطّف التمويه حافته؛ ويكبّره الانتشار أو يصغّره قبل التمويه. والانتشار السالب يسحب الظل إلى الداخل، وهكذا تحصل على ظل محكم تحت بطاقة دون أن يتسرب من الجانبين.
جعله يبدو واقعيًا
يأتي الضوء عادةً من الأعلى، لذا فإزاحة رأسية موجبة صغيرة دون إزاحة أفقية تبدو طبيعية. والظلال الكبيرة شديدة الشفافية توحي بعمق ناعم؛ والصغيرة الداكنة الحادة توحي بملصق مقصوص. وتُلقي الأجسام الحقيقية ظلالًا أكثر ضبابية كلما ابتعدت عن السطح — فتمويه أكبر يوحي بعنصر أعلى.
الظلال الداخلية
يُرسم الظل الداخلي داخل العنصر لا خارجه، وهكذا تُصنع الأزرار المضغوطة وحقول الإدخال واللوحات الغائرة. وتنطبق الأرقام الأربعة نفسها، لكنها تتجه إلى الداخل.
عدة ظلال معًا
يقبل CSS قائمة مفصولة بفواصل، وتراكب اثنين — أحدهما محكم داكن والآخر واسع باهت — يبدو أفضل بكثير من واحد. ينتج هذا المولّد ظلًا واحدًا؛ فالصق اثنين معًا بنفسك للحصول على تأثير الطبقات.
مولّد ظل الصندوق في CSS — أسئلة
بأي ترتيب القيم؟
الإزاحة الأفقية، الإزاحة الرأسية، التمويه، الانتشار، ثم اللون.
ماذا يفعل الانتشار السالب؟
يقلّص الظل قبل التمويه، فيبقى محكمًا تحت العنصر بدلًا من أن يتسرب من الجانبين.
ما الظل الداخلي (inset)؟
ظل يُرسم داخل العنصر لا خارجه — يُستخدم للأزرار المضغوطة وحقول الإدخال.
هل يمكنني صنع ظل متعدد الطبقات؟
ليس مباشرةً. يقبل CSS قائمة مفصولة بفواصل، فأنشئ ظلّين والصقهما معًا.