فهم مشكلة Inset Box-Shadow على الصور

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

حالة الظلال غير المرئية

خذ بعين الاعتبار المثال المقدم في السؤال الأصلي:

body {
  background-color: #000000;
}

main {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 90%;
  height: 90%;
  background-color: #FFFFFF;
  box-shadow: inset 3px 3px 10px 0 #000000;
}

main::after {
  box-shadow: inset 3px 3px 10px 0 #000000;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
}

على الرغم من أن الهدف هو تطبيق ظل مربع داخلي حول الحاوية، بما في ذلك الصورة، إلا أنه يفشل في الظهور. لماذا يحدث هذا؟

مسألة شفافية الصورة

السبب وراء فقدان الظل على الصور يكمن في الشفافية. عندما تحتوي الصورة على خلفية شفافة، فهي في الأساس نافذة لعنصر الخلفية. في هذه الحالة، خلفية الحاوية سوداء. ونتيجة لذلك، يصبح الظل الداخلي غير مرئي على المناطق الشفافة من الصورة.

التغلب على حاجز الشفافية

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

في مقتطف CSS المحدث أدناه، نطبق : بعد الزائف عنصر إلى الحاوية

main::after {
  box-shadow: inset 3px 3px 10px 0 #000000;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
}

مع هذا التعديل، يظهر ظل المربع الداخلي الآن فوق كل من المناطق المعتمة والشفافة في الصورة، مما يعطي تأثير الظل المطلوب.