Des box-shadows qui ne débordent pas sur les autres éléments

Lorsque l’on juxtapose des éléments qui ont un effet box-shadow dont le spread est plus important que l’espacement entre ces éléments, l’ombre d’un élément vas déborder sur l’autre, et ce n’est pas ce que l’on veut.

Remarque : Le plus simple, c’est que le spread soit moins important que l’espacement. Mais dans certains cas, ce n’est pas le design que l’on souhaite.

Le problème, c’est que la box-shadow est liée à son élément. Ce n’est pas un élément distinct qui pourrait être positionné sur un autre plan. Il faut voir la box-shadow comme un débordement de l’élément et non comme un effet qui serait placé derrière. La solution va être de dissocier l’élément et sa box-shadow pour les placer sur des plans différents. Voici ce que ça peut donner :

L’effet box-shadow est appliqué sur le pseudo-éléments :after. Celui-ci est positionnés de manière absolue par rapport aux éléments .card et possède un attribut z-index:-1.

Changer l’effet de profondeur avec l’effet :hover

L’effet :hover fait passer la box-shadow du pseudo élément :after vers l’élément .card et positionne ce dernier au dessus avec z-index:1. Cela permet de positionner l’ombre au dessus de l’autre élément .card, ce qui créé cet effet de profondeur.