انتقل إلى محتوى الدرس

Multiple Shadows and Focus Rings دمج الظلال المتعددة وحلقات التركيز

صمم عمقاً بصرياً واقعياً للبطاقات والأزرار عبر ظلال الصناديق في لغة CSS باستخدام الإزاحة والتمويه ونصف قطر الانتشار والظلال الغائرة وحلقات التركيز الدائرية دون التأثير في التخطيط.
2 صفوف تعليمية
لغة CSS
0 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

نادراً ما تنتج الإضاءة الطبيعية في الواقع ظلاً منفرداً مسطحاً؛ ولذلك تسمح box-shadow بدمج عدة ظلال مفصولة بفواصل مثل ظل تلامس قريب 0 2px 4px rgba(15, 23, 42, 0.08) مع ظل محيطي أوسع 0 12px 24px rgba(15, 23, 42, 0.12) لمحاكاة التدرج الضوئي الطبيعي.

كما يُستثمر تعدد الظلال بصفر إزاحة وصفر تمويه لبناء حلقات تركيز مزدوجة عالية التباين عند حالة :focus مثل 0 0 0 2px #ffffff, 0 0 0 5px #7750b2، فتلتف بدقة حول الزوايا المدورة للأزرار دون أن تستهلك أي مساحة إضافية في التخطيط.

الصف 2 ملاحظة هامة