CSS box-shadow en tres lados de un div?

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

Fuente

2012-01-05 user1117313

Parece ser un duplicado de http://stackoverflow.com/questions/1429605/creating-a-css3-box-shadow-on-all-sides-but-one – jcuenod

Es una tontería, pero esta tiene una mejor respuesta en mi opinión. ¿Pueden fusionarse? –

Aquí hay un JS Fiddle para ti, solo usa un solo div para trabajar.

#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; 
}

Establece una sombra en la parte inferior, inferior izquierda e 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 intermedia, de modo que se vea transparente y no demasiado oscuro cuando se solape con las sombras laterales.

Fuente

2012-01-05 07:20:33

¿no podría obtener el mismo efecto simplemente ajustando la posición y de 1 sombra de cuadro? – Vigrond

@Vigrond Intenté eso, no hace que la sombra borrosa caiga lo suficiente. Necesita agregar dos sombras en las esquinas para que los lados sean más parejas. –

No creo que esta sea la respuesta correcta, esto parece apilar tres sombras de caja separadas una sobre la otra, haciendo que cada borde sea mucho más oscuro de lo esperado. ¿No hay una manera de agregar una sola sombra a cada lado, o una sombra que cubra las tres? – jenlampton

He aquí un ejemplo del valor negativo Y sugerido por @Vigrond

box-shadow: 0px -8px 10px 0px rgba(0,0,0,0.15);

Fuente

2015-04-22 01:35:15 jenlampton

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

Se puede ver una demo aquí: http://codepen.io/thdoan/pen/vNvpKv

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

Fuente

2015-11-13 09:54:01 10basetom

Si busca para algo como Google sombras diseño de materiales:

.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

Fuente

2016-05-24 09:45:48

Para sombras translúcidas con esquinas duras (es decir no radio de desenfoque) utilicé esta:

.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 utiliza una sombra para las partes izquierda y derecha y añade el: después del contenido de pseudo como la sombra inferior. Esto evita superposiciones 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.

Fuente

2017-03-02 17:10:46 spikyjt

CSS box-shadow en tres lados de un div?

Respuesta

Cuestiones relacionadas