Comprendre le problème des ombres de boîte en médaillon sur les images

Dans la conception Web, l'utilisation d'ombres de boîte en médaillon pour créer de la profondeur et de la dimension au sein des éléments est une technique courante. Cependant, lorsqu’il s’agit de conteneurs contenant des images, ce n’est pas toujours simple. Le problème survient lorsque l'ombre de la boîte en médaillon semble disparaître sur les images intégrées.

Le cas des ombres invisibles

Considérez l'exemple fourni dans la question d'origine :

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

Bien que l'objectif soit d'appliquer une ombre de boîte en médaillon autour du conteneur, y compris l'image, elle ne parvient pas à apparaître. Pourquoi cela se produit-il ?

Le problème de la transparence des images

La raison derrière l'ombre manquante sur les images réside dans la transparence. Lorsqu'une image a un arrière-plan transparent, il s'agit essentiellement d'une fenêtre sur l'élément d'arrière-plan. Dans ce cas, le fond du conteneur est noir. De ce fait, l'ombre incrustée devient invisible sur les zones transparentes de l'image.

Surmonter la barrière de la transparence

Pour contourner ce problème, une solution simple et élégante est disponible : utiliser le CSS :après le pseudo-élément. En ajoutant un pseudo-élément :after au conteneur, nous pouvons créer un calque supplémentaire qui se trouve au-dessus de l'image et reçoit l'ombre de la boîte en médaillon.

Dans l'extrait CSS mis à jour ci-dessous, nous appliquons le pseudo :after élément vers le conteneur

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

Avec cette modification, l'ombre de la boîte en médaillon apparaît désormais sur les zones opaques et transparentes de l'image, donnant l'effet d'ombre souhaité.