مولد ظلال الصناديق

كيفية الاستخدام

1. ابدأ بإعداد مسبق أو عدّل إزاحة الطبقة الأولى وتمويهها وانتشارها ولونها وشفافيتها.
2. أضف طبقات لمظهر أكثر واقعية، أو حدّد «ظل داخلي».
3. غيّر خلفية المعاينة ولون الصندوق ليتناسبا مع تصميمك، ثم انسخ CSS.

كيف تعمل الأداة

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

عادةً ما يجمع الارتفاع الواقعي بين ظل صغير وحاد وآخر أكبر وأكثر نعومة بشفافية منخفضة، وهذا ما يفعله الإعداد المسبق «مرتفع». تُكتب الألوان بصيغة rgba() لتحديد الشفافية بوضوح. تتبع الظلال قيمة border-radius للعنصر ولا تشغل مساحة في التخطيط، لذا لا تحرّك العناصر الأخرى.

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

أمثلة

الأسئلة الشائعة

الخصوصية

يُنشأ CSS في متصفحك. لا يتم تحميل أي شيء أو تخزينه.