Comprender el problema de las sombras de cuadros insertados en las imágenes

En diseño web, usar sombras de cuadros insertados para crear profundidad y dimensión dentro de los elementos es una técnica común. Sin embargo, cuando se trata de contenedores que contienen imágenes, no siempre es sencillo. El problema surge cuando la sombra del cuadro insertado parece desaparecer sobre las imágenes incrustadas.

El caso de las sombras invisibles

Considere el ejemplo proporcionado en la pregunta original:

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%;
}

Si bien el objetivo es aplicar una sombra de cuadro insertado alrededor del contenedor, incluida la imagen, no aparece. ¿Por qué sucede esto?

La cuestión de la transparencia de las imágenes

La razón detrás de la falta de sombra en las imágenes radica en la transparencia. Cuando una imagen tiene un fondo transparente, es esencialmente una ventana al elemento de fondo. En este caso, el fondo del contenedor es negro. Como resultado, la sombra insertada se vuelve invisible en las áreas transparentes de la imagen.

Superando la barrera de la transparencia

Para solucionar este problema, hay disponible una solución simple y elegante: usar CSS :después del pseudo elemento. Al agregar un pseudoelemento :after al contenedor, podemos crear una capa adicional que se ubica encima de la imagen y recibe la sombra del cuadro insertado.

En el fragmento de CSS actualizado a continuación, aplicamos el pseudoelemento :after elemento al contenedor

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

Con esta modificación, la sombra del cuadro insertado ahora aparece sobre las áreas opacas y transparentes de la imagen, dando el efecto de sombra deseado.