Compreendendo o problema de sombra de caixa inserida em imagens

Em web design, usar sombras de caixa inserida para criar profundidade e dimensão dentro dos elementos é uma técnica comum. No entanto, ao lidar com contêineres contendo imagens, nem sempre é simples. O problema surge quando a sombra da caixa inserida parece desaparecer sobre as imagens incorporadas.

O caso das sombras invisíveis

Considere o exemplo fornecido na pergunta 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%;
}

Embora o objetivo seja aplicar uma sombra de caixa inserida ao redor do contêiner, incluindo a imagem, ela não aparece. Por que isso acontece?

A questão da transparência da imagem

A razão por trás da falta de sombra nas imagens está na transparência. Quando uma imagem tem fundo transparente, é essencialmente uma janela para o elemento de fundo. Neste caso, o fundo do container é preto. Como resultado, a sombra inserida torna-se invisível nas áreas transparentes da imagem.

Superando a barreira de transparência

Para contornar esse problema, uma solução simples e elegante está disponível: usar CSS :após o pseudoelemento. Ao adicionar um pseudoelemento :after ao contêiner, podemos criar uma camada extra que fica no topo da imagem e recebe a sombra da caixa inserida.

No snippet CSS atualizado abaixo, aplicamos o pseudo :after elemento para o contêiner

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

Com esta modificação, a sombra da caixa inserida agora aparece sobre as áreas opacas e transparentes da imagem, dando o efeito de sombra desejado.