مولّد ظل CSS (Box Shadow)
ظلال CSS بطبقات ومعاينة حية، وكود جاهز للنسخ.
عن الأداة
قيمة box-shadow خمسة أجزاء: الإزاحة الأفقية، والرأسية، والتمويه (كلما زاد صار الظل أنعم وأوسع)، والانتشار (يكبّر الظل أو يصغّره قبل التمويه)، ثم اللون. وكلمة inset تجعل الظل داخل العنصر كأنه محفور.
الظل الواقعي نادرًا ما يكون طبقة واحدة. الضوء الحقيقي يصنع ظلًا قريبًا حادًا عند حافة الجسم وظلًا بعيدًا ناعمًا حوله، ولذلك تبدو الظلال بطبقتين أو ثلاث (مثل إعداد «طبقات واقعية») أكثر طبيعية من ظل واحد كبير داكن.
الانتشار السالب مع تمويه كبير يصنع ظلًا يبقى تحت العنصر ولا يظهر على جانبيه، وهو ما تستخدمه أغلب البطاقات الحديثة.
أسئلة شائعة
هل الظلال تبطئ الصفحة؟
الظل الثابت لا يكاد يؤثر. البطء يظهر حين تحرّك ظلًا كبيرًا بالرسوم المتحركة؛ حرّك transform أو opacity بدلًا منه.
ما الفرق بين box-shadow وdrop-shadow؟
box-shadow يتبع مستطيل العنصر وحوافه المستديرة، أما filter: drop-shadow فيتبع شكل المحتوى الفعلي، مثل صورة PNG شفافة أو أيقونة SVG.