Teoría
Teoría

Sombras con pseudoelementos y rotate

A veces necesitamos crear sombras diferentes de las habituales de box-shadow, sin recurrir a imágenes.

Por ejemplo, sombras inclinadas en direcciones opuestas.

No basta con aplicar box-shadow directamente al bloque. Necesitamos un truco un poco más elaborado:

creamos dos bloques con sombras normales mediante los pseudoelementos before y after;
giramos esos bloques con rotate;
les damos un z-index negativo.

Así, los bloques con sombras quedan detrás del contenedor padre y solo sobresalen algunos fragmentos de las sombras.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <title>Sombras con pseudoelementos y rotate</title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="shadow-box"> <h3>Bloque con sombras</h3> </div> </body> </html>

CSS

body { margin: 0; padding: 0; background-color: #f5f5f5; font-family: "Arial Narrow", "Arial", sans-serif; } .shadow-box { position: relative; width: 400px; height: 100px; margin: 50px auto; padding: 100px 0; text-align: center; background-color: white; box-shadow: 0 0 3px #cccccc; } .shadow-box::before, .shadow-box::after { content: ""; position: absolute; top: 80%; bottom: 15px; width: 45%; max-width: 300px; background-color: #dddddd; box-shadow: 0 15px 10px #555555; } .shadow-box::before { left: 10px; } .shadow-box::after { right: 10px; }

ObjetivosRealizado

Gira el pseudoelemento before del bloque .shadow-box3° en sentido contrario a las agujas del reloj.
Después gira el pseudoelemento after3° en el sentido de las agujas del reloj.
Asigna z-index: -1 a ambos pseudoelementos.