L'utilisation des ombres en CSS ne se limite pas à la simple propriété box-shadow appliquée à un bloc. Pour obtenir des rendus visuels plus organiques, tels que des effets de papier incurvé ou des coins soulevés, il est nécessaire de comibner les ombres avec des pseudo-éléments et des transformations géométriques.

1. Création d'une ombre incurvée (Curved Shadow)

L'effet d'ombre courbe repose sur la superposition d'un conteneur principal et d'un élément secondaire masqué en arrière-plan. L'élément secondaire adopte une forme elliptique grâce au border-radius, et son ombre dépasse du cadre principal pour simuler une courbure.

La mise en œuvre suit deux étapes clés :

• Appliquer une ombre interne légère au conteneur pour donner de la profondeur à sa surface.
• Utiliser un pseudo-élément positionné avec un z-index négatif, doté d'une bordure arrondie spécifique, pour générer l'ombre portée incurvée.

<!-- Structure HTML -->
<div class="container-curved">
   <div class="content-box shadow-curved">
       <h2>Effet de Courbe</h2>
   </div>
</div>

/* Styles CSS */
.shadow-curved {
   position: relative;
   background: #ffffff;
   padding: 50px;
   text-align: center;
   box-shadow: 0 1px 3px rgba(0,0,0,0.2), 0 0 35px #f0f0f0 inset;
}

.shadow-curved::after {
   content: "";
   position: absolute;
   z-index: -1;
   left: 15px;
   right: 15px;
   bottom: 0;
   top: 60%;
   background: #fff;
   /* Création de la forme elliptique */
   border-radius: 120px / 12px;
   box-shadow: 0 12px 18px rgba(0,0,0,0.7);
}

2. Effet de bords relevés (Lifted Edges)

L'effet de "coins soulevés" simule une feuille de papier dont les angles inférieurs se décollent de la surface. Contrairement à l'ombre courbe, cette technique utilise les propriétés skew (inclinaison) et rotate (rotation) pour déformer les ombres portées sous les coins du bloc.

Le principe consiste à créer deux ombres distinctes via les pseudo-éléments ::before et ::after. Chacun de ces éléments est incliné et pivoté dans une direction opposée avant d'être placé derrière l'élément principal.

<!-- Structure HTML -->
<ul class="gallery-layout">
   <li class="lifted-item">
       <img src="image-demo.jpg" alt="Exemple">
   </li>
</ul>

/* Styles CSS */
.gallery-layout {
   display: flex;
   justify-content: center;
   list-style: none;
   padding: 30px;
}

.lifted-item {
   position: relative;
   width: 350px;
   height: 240px;
   background: #fff;
   border: 1px solid #ddd;
   box-shadow: 0 1px 5px rgba(0,0,0,0.2), 0 0 50px rgba(0,0,0,0.05) inset;
}

.lifted-item img {
   width: 330px;
   height: 220px;
   margin: 10px;
   display: block;
}

/* Pseudo-éléments pour les coins soulevés */
.lifted-item::before, 
.lifted-item::after {
   content: "";
   position: absolute;
   bottom: 12px;
   width: 40%;
   height: 75%;
   z-index: -1;
   background: transparent;
   box-shadow: 0 10px 18px rgba(0,0,0,0.6);
}

.lifted-item::before {
   left: 15px;
   transform: skew(-10deg) rotate(-5deg);
}

.lifted-item::after {
   right: 15px;
   transform: skew(10deg) rotate(5deg);
}

En ajustant les angles de rotation (rotate) et d'inclinaison (skew), vous pouvez modifier l'intensité du soulèvement. Une inclinaison plus forte accentuera l'aspect "décollé", tandis qu'une valeur plus faible rendra l'effet plus subtil.