CSS box-sombra en tres lados de un div?

Quiero tener sombra de caja en tres lados de un div (excepto el lado superior). ¿Cómo podría hacer eso?

 30
csscss3
Author: user1117313, 2012-01-05
Source

5 answers

Aquí hay un JS Fiddle para usted, solo usa un solo div para funcionar.

#shadowBox {
    background-color: #ddd;
    margin: 0px auto;
    padding: 10px;
    width: 220px;
    box-shadow: 0px 8px 10px gray, 
        -10px 8px 15px gray, 10px 8px 15px gray;
}

Se establece una sombra en la parte inferior, inferior izquierda y inferior derecha. Con sombras suaves se vuelve un poco complicado, pero es factible. Solo necesita un poco de conjetura para disminuir el radio de desenfoque de la sombra media, para que se vea perfecta y no demasiado oscura cuando se superpone con las sombras laterales.

 34
Author: Chris C,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-01-05 07:22:52

Si estás buscando algo como sombras de Google Material design: 

.shadow1 {
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.shadow2 {
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
.shadow3 {
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.shadow4 {
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.shadow5 {
    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}

Fuente: https://medium.com/@Florian/freebie-google-material-design-shadow-helper-2a0501295a2d#.wyvbmcq10

 3
Author: Maciej Krawczyk,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-05-24 09:45:48

Aquí hay un ejemplo del valor negativo Y sugerido por @ Vigrond

box-shadow: 0px -8px 10px 0px rgba(0,0,0,0.15);
 1
Author: jenlampton,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-04-22 01:35:15

Si tiene un color de fondo sólido, entonces puede lograr esto usando una combinación de background-color y z-index. El truco es darle al elemento con box-shadow y su posición anterior de hermano, luego darle al hermano anterior un color de fondo y configurarlo para que tenga un z-index más alto para que se apile encima del elemento con box-shadow, en efecto cubriendo su sombra superior.

Puedes ver una demostración aquí: http://codepen.io/thdoan/pen/vNvpKv

Si no hay inmediato anterior hermano para trabajar, entonces también puede utilizar un pseudo-elemento como :before o :after: http://codepen.io/thdoan/pen/ojJEMj

 0
Author: thdoan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-11-13 12:06:19

Para sombras translúcidas con esquinas duras (es decir, sin radio de desenfoque) utilicé esto: 

.shadow-no-top {
  position: relative;
  box-shadow: -5px 0 0 0 rgba(0,0,0,.2), 5px 0 0 0 rgba(0,0,0,.2);
}
.shadow-no-top:before {
  content: "";
  position: absolute;
  top: 100%;
  left: -5px;
  right: -5px;
  bottom: -5px;
  background-color: rgba(0,0,0,.2);
}

Esto usa una sombra para las partes izquierda y derecha y agrega el pseudo contenido :after como la sombra inferior. Esto evita solapamientos que hacen que la sombra sea más oscura o que falten esquinas.

Sin embargo, esto requiere que el fondo del elemento sea sólido.

 0
Author: spikyjt,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-03-02 17:10:46