مولّد ظل CSS

أنشئ خاصية box-shadow في CSS بصرياً باستخدام أشرطة التمرير. شاهد معاينة مباشرة وانسخ شفرة CSS. يدعم الظلال الخارجية والداخلية وتعدد الظلال.

الاستوديو · محيط محايد
0px
8px
24px
-6px
14%

  

الميزات

التحكم بأشرطة التمرير
منتقي الألوان
تبديل الظل الداخلي
طبقات متعددة
معاينة حية مع كود CSS

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

1. شكّل الظل بأشرطة التمرير — البطاقة المحايدة في منطقة العمل تُظهر النتيجة النهائية تمامًا.

2. الظلال الواقعية متعددة الطبقات: أضف حتى أربع طبقات، أو ابدأ من إعداد جاهز (ناعم / مرتفع / عائم / داخلي).

3. بدّل الخلفية لفحص الظل على الأبيض والرمادي والداكن، ثم انسخ CSS.

حول هذه الأداة

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

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

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

أدوات ذات صلة