مولّد الظل

نعم، يمكنك إضافة ظلال متعددة لإنشاء عمق وتأثيرات معقدة. ويمكن ضبط كل ظل على حدة.

يظهر ظل inset داخل العنصر بدلاً من خارجه. بينما يظهر box-shadow العادي خارجاً، تُنشئ إضافة inset تأثير غائر مضغوط.

الظلال الحقيقية ليست سوداء، بل هي لون الخلفية بعد إعتامه، وتتلاشى كلما ابتعدت نحو الأطراف. وبدل ظلّ أسود واحد ثقيل بنسبة 30%، راكم طبقتين أو ثلاثاً باهتة جداً بأنصاف أقطار تمويه مختلفة: مثلاً واحدة بـ 1 بكسل ملاصقة للحافة، وأخرى بـ 8 بكسل خلفها، وثالثة خفيفة جداً بـ 24 بكسل أبعد. وافترض أن الضوء يأتي من الأعلى: امنح الظل إزاحة رأسية فقط واترك الأفقية عند الصفر.

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