soltar sombra solo abajo css3

¿Hay alguna manera de dejar caer la sombra solo en el fondo ?. Tengo un menú con 2 imágenes al lado de cada uno. No quiero una sombra correcta porque se superpone a la imagen correcta. No me gusta usar imágenes para esto, así que hay una manera de colocarlo solo en la parte inferior como:

box-shadow-bottom: 10px #FFF; ¿o similar?

 -moz-box-shadow: 0px 3px 3px #000; -webkit-box-shadow: 0px 3px 3px #000; box-shadow-bottom: 5px #000; /* For IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000')"; /* For IE 5.5 - 7 */ filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000'); 

ACTUALIZACIÓN 4

Lo mismo que la actualización 3 pero con css moderno (= menos reglas) para que no se requiera un posicionamiento especial en el pseudo elemento.

 #box { background-color: #3D6AA2; width: 160px; height: 90px; position: absolute; top: calc(10% - 10px); left: calc(50% - 80px); } .box-shadow:after { content:""; position:absolute; width:100%; bottom:1px; z-index:-1; transform:scale(.9); box-shadow: 0px 0px 8px 2px #000000; } 
 

Solo usa el parámetro spread para hacer que la sombra sea más pequeña:

 .shadow { -webkit-box-shadow: 0 6px 4px -4px black; -moz-box-shadow: 0 6px 4px -4px black; box-shadow: 0 6px 4px -4px black; } 
 
Some content

Si tiene un color fijo en el fondo, puede ocultar el efecto de sombra lateral con dos sombras enmascaradoras que tienen el mismo color del fondo y desenfoque = 0, por ejemplo:

 box-shadow: -6px 0 white, /*Left masking shadow*/ 6px 0 white, /*Right masking shadow*/ 0 7px 4px -3px black; /*The real (slim) shadow*/ 

Tenga en cuenta que la sombra negra debe ser la última, y ​​tiene una extensión negativa (-3px) para evitar que se extienda más allá de las esquinas.

Aquí el violín (cambia el color de las sombras enmascaradoras para ver cómo funciona realmente ).

enter image description here

Siempre es mejor leer las especificaciones . No hay box-shadow-bottom propiedad de box-shadow-bottom y, como Lea señala, siempre debe colocar la propiedad sin prefijo en la parte inferior, después de los prefijados.

Entonces es:

 .shadow { -webkit-box-shadow: 0px 2px 4px #000000; -moz-box-shadow: 0px 2px 4px #000000; box-shadow: 0px 2px 4px #000000; } 
 
Some content

Creo que esto es lo que buscas?

 .shadow { -webkit-box-shadow: 0 0 0 4px white, 0 6px 4px black; -moz-box-shadow: 0 0 0 4px white, 0 6px 4px black; box-shadow: 0 0 0 4px white, 0 6px 4px black; } 
 
wefwefwef

¿Qué tal si usamos un div que contiene un desbordamiento configurado como oculto y un relleno en la parte inferior? Esta parece ser la solución más simple.

Perdón por decir que no pensé en esto yo mismo, pero lo vi en otro lado .

Usando un elemento para envolver el elemento que obtiene la sombra de caja y un desbordamiento: oculto en el envoltorio, puede hacer que desaparezca la sombra de caja adicional y aún así tener un borde utilizable. Esto también soluciona el problema donde el elemento es más pequeño como parece, debido a la extensión.

Me gusta esto:

 #wrapper { padding-bottom: 10px; overflow: hidden; } #elem { box-shadow: 0 0 10px black; } 

El contenido va aquí

¡Todavía es una solución inteligente cuando tiene que hacerse en CSS puro!

Como dijo Jorgen Evens .

También necesitaba una sombra, pero solo debajo de una imagen y colocada ligeramente izquierda y derecha. Esto funcionó para mí:

 .box-shadow { -webkit-box-shadow: 5px 35px 30px -25px #888888; -moz-box-shadow: 5px 35px 30px -25px #888888; box-shadow: 5px 35px 30px -25px #888888; } 

El elemento al que se aplica es una imagen de página completa (980px x 300px).

Si te ayuda cuando juegas con la configuración, se ejecutan de la siguiente manera:

sombra horizontal, sombra vertical, distancia de difuminado, extensión (es decir, tamaño de la sombra) y color.

Si su fondo es sólido (o puede reproducirlo usando CSS), puede usar degradado lineal de esa manera:

 div { background-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 5px, #fff 5px, #fff 100%) } 
 

Foobar

test

Actualice a otra persona su respuesta en los lados transparentes en lugar de en blanco, por lo que también funciona en otros fondos de color.

 body { background: url(http://s1.picswalls.com/wallpapers/2016/03/29/beautiful-nature-backgrounds_042320876_304.jpg) } div { background: url(https://www.w3schools.com/w3css/img_avatar3.png) center center; background-size: contain; width: 100px; height: 100px; margin: 50px; border: 5px solid white; box-shadow: 0px 0 rgba(0, 0, 0, 0), 0px 0 rgba(0, 0, 0, 0), 0 7px 7px -5px black; } 
 

sombra interior

  .shadow { -webkit-box-shadow: inset 0 0 9px #000; -moz-box-shadow: inset 0 0 9px #000; box-shadow: inset 0 0 9px #000; } 
 
wefwefwef