تحقيق عدة ظلال منسدلة على عنصر باستخدام CSS

عند محاولة إعادة إنشاء تصميم زر Photoshop في CSS، قد تواجه قيودًا في تطبيق ظلال مربعات متعددة على عنصر عنصر واحد. بشكل افتراضي، يسمح CSS بظل مربع نشط واحد فقط، سواء داخليًا أو خارجيًا.

للتغلب على هذا القيد، يمكنك الاستفادة من ميزة الفصل بفاصلة التي يوفرها CSS3. يتيح لك هذا تحديد تعريفات ظل متعددة ضمن نفس خاصية ظل الصندوق:

box-shadow: inset 0 2px 0px #dcffa6, 0 2px 5px #000;

بالفصل باستخدام تعريفي الظل بفاصلة، يمكنك إنشاء ظلين مختلفين بشكل فعال على عنصر الزر الخاص بك. يمثل الظل الأول، الداخلي 0 2px 0px #dcffa6، ظل مربع الضوء الداخلي، بينما الظل الثاني، 0 2px 5px #000، ينشئ الظل المسقط الخارجي.

تتيح لك هذه التقنية تحقيق الزر المطلوب تصميم باستخدام ظلين مطبقين في وقت واحد، مما يوفر تأثيرًا أكثر واقعية وجاذبية بصريًا.