Comment créer un box shadow vertical sur un élement ?
Ici le but est de créer une ombre sur les coins, pour donner l’impression qu’on a devant soi la page d’un livre. Sur le net, vous trouverez une foule d’exemples pour des ombres horizontales. En revanche pas grand chose sur des ombres verticales. Voici donc un exemple. Il doit y avoir une façon plus simple, mais c’est déjà une approche :
Sur un conteneur parent, on crée deux pseudo-éléments ::after et ::before. Ce sont deux lignes d’1px auxquelles on applique l’ombre et que l’on va lentement tourner (rotate) jusqu’à former un X derrière le conteneur.
Si on cible ces deux lignes via l’inspecteur, on voit bien qu’elles forment une croix. L’extrémité haute de la première va créer l’ombre du coin supérieur droit du conteneur.. et l’extrémité basse de la seconde va créer l’ombre du coin inférieur droit.
C’est un peu alambiqué mais ca fonctionne. La seule contrainte, c’est qu’il faut ensuite jouer sur les hauteurs et placements des deux lignes pour que ca passe en mobile/tablette
Voici l’exemple:
See the Pen
Vertical Curved Shadow by blindDev (@yuyazz)
on CodePen.