sombras - solo sombra css3 inferior
resplandor css (11)
¿Hay alguna forma de soltar la sombra solo en la parte inferior? Tengo un menú con 2 imágenes uno al lado del otro. 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 soltarlo 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
Igual que la actualización 3 pero con el 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;
}
<div id="box" class="box-shadow"></div>
ACTUALIZACIÓN 3
Todas mis respuestas anteriores han estado utilizando un marcado adicional para crear este efecto, que no es necesariamente necesario. Creo que esta es una solución mucho más limpia ... el único truco es jugar con los valores para obtener el posicionamiento correcto de la sombra, así como la resistencia / opacidad correcta de la sombra. Aquí hay un nuevo violín, usando pseudo-elements :
http://jsfiddle.net/UnsungHero97/ARRRZ/2/
HTML
<div id="box" class="box-shadow"></div>
CSS
#box {
background-color: #3D6AA2;
width: 160px;
height: 90px;
margin-top: -45px;
margin-left: -80px;
position: absolute;
top: 50%;
left: 50%;
}
.box-shadow:after {
content: "";
width: 150px;
height: 1px;
margin-top: 88px;
margin-left: -75px;
display: block;
position: absolute;
left: 50%;
z-index: -1;
-webkit-box-shadow: 0px 0px 8px 2px #000000;
-moz-box-shadow: 0px 0px 8px 2px #000000;
box-shadow: 0px 0px 8px 2px #000000;
}
ACTUALIZACIÓN 2
Aparentemente, puedes hacer esto con solo un parámetro adicional al cuadro de sombra CSS como todos los demás acaban de señalar. Aquí está la demostración:
http://jsfiddle.net/K88H9/821/
CSS
-webkit-box-shadow: 0 4px 4px -2px #000000;
-moz-box-shadow: 0 4px 4px -2px #000000;
box-shadow: 0 4px 4px -2px #000000;
Esta sería una mejor solución. El parámetro adicional que se agrega se describe como:
La cuarta longitud es una distancia de propagación. Los valores positivos hacen que la forma de la sombra se expanda en todas las direcciones en el radio especificado. Los valores negativos hacen que la forma de la sombra se contraiga.
ACTUALIZAR
Echa un vistazo a la demostración en jsFiddle: http://jsfiddle.net/K88H9/4/
Lo que hice fue crear un "elemento de sombra" que se escondería detrás del elemento real que desearías tener una sombra. Hice que el ancho del "elemento de sombra" sea exactamente menos ancho que el elemento real en 2 veces la sombra que especifique; entonces lo alineé correctamente.
HTML
<div id="wrapper">
<div id="element"></div>
<div id="shadow"></div>
</div>
CSS
#wrapper {
width: 84px;
position: relative;
}
#element {
background-color: #3D668F;
height: 54px;
width: 100%;
position: relative;
z-index: 10;
}
#shadow {
background-color: #3D668F;
height: 8px;
width: 80px;
margin-left: -40px;
position: absolute;
bottom: 0px;
left: 50%;
z-index: 5;
-webkit-box-shadow: 0px 2px 4px #000000;
-moz-box-shadow: 0px 2px 4px #000000;
box-shadow: 0px 2px 4px #000000;
}
Respuesta original
Sí, puede hacer esto con la misma sintaxis que ha proporcionado. El primer valor controla la posición horizontal y el segundo valor controla la posición vertical. Así que solo establece el primer valor en 0px y el segundo en el desplazamiento que desees de la siguiente manera:
-webkit-box-shadow: 0px 5px #000000;
-moz-box-shadow: 0px 5px #000000;
box-shadow: 0px 5px #000000;
Para obtener más información sobre las sombras de la caja, echa un vistazo a estos:
- http://www.css3.info/preview/box-shadow/
- https://developer.mozilla.org/en/css/-moz-box-shadow#Browser_compatibility
- http://www.w3.org/TR/css3-background/#the-box-shadow
Espero que esto ayude.
¿Qué tal si solo usas un div que contiene el desbordamiento establecido en oculto y algún relleno en la parte inferior? Esta parece ser la solución más simple.
Lamento decir que no pensé en esto, pero lo vi en otro lugar .
Usando un elemento para envolver el elemento y obtener la sombra de la caja y un desbordamiento: oculto en la envoltura, puede hacer que la sombra de la caja extra desaparezca y aún tenga un borde utilizable. Esto también soluciona el problema donde el elemento es más pequeño como parece, debido a la propagación.
Me gusta esto:
#wrapper { padding-bottom: 10px; overflow: hidden; } #elem { box-shadow: 0 0 10px black; }El contenido va aqui
¡Todavía es una solución inteligente cuando se debe hacer en CSS puro!
Como dijo Jorgen Evens .
Creo que esto es lo que estás buscando?
.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;
}
<div class="shadow">wefwefwef</div>
Es mejor mirar la sombra:
.header{
-webkit-box-shadow: 0 -8px 73px 0 rgba(0,0,0,0.2);
-moz-box-shadow: 0 -8px 73px 0 rgba(0,0,0,0.2);
box-shadow: 0 -8px 73px 0 rgba(0,0,0,0.2);
}
este código se está utilizando actualmente en la web .
Si su fondo es sólido (o puede reproducirlo usando CSS), puede usar un 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%)
}
<div>
<p>Foobar</p>
<p>test</p>
</div>
Esto generará un gradiente de 5px en la parte inferior del elemento, desde negro con una opacidad del 30% hasta completamente transparente. El resto del elemento tiene fondo blanco. Por supuesto, al cambiar las dos últimas paradas de color del degradado lineal, puede hacer que el fondo sea completamente transparente.
Si tiene un color fijo en el fondo, puede ocultar el efecto de sombra lateral con dos sombras de máscara 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 fiddle (cambie el color de las sombras de máscara para ver cómo funciona realmente ).
Siempre es mejor leer http://www.w3.org/TR/css3-background/#the-box-shadow . No hay box-shadow-bottom propiedad box-shadow-bottom , y como Lea señala, siempre debe colocar la propiedad sin prefijo en la parte inferior, después de las prefijadas.
Así que es:
.shadow {
-webkit-box-shadow: 0px 2px 4px #000000;
-moz-box-shadow: 0px 2px 4px #000000;
box-shadow: 0px 2px 4px #000000;
}
<div class="shadow">Some content</div>
Solo usa el parámetro de propagación para hacer la sombra 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;
}
<div class="shadow">Some content</div>
Demostración en vivo: http://dabblet.com/gist/a8f8ba527f5cff607327
Para no ver ninguna sombra en los lados, el (valor absoluto del) radio de propagación (4º parámetro) debe ser el mismo que el radio de desenfoque (3º parámetro).
También necesitaba una sombra, pero solo debajo de una imagen y colocada ligeramente a la 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 toda la página (980px x 300px).
Si ayuda al jugar con la configuración, se ejecutan de la siguiente manera:
Sombra horizontal, sombra vertical, distancia de desenfoque, extensión (es decir, tamaño de sombra) y color.
actualice en otra persona sus lados transparentes de respuesta en lugar de blanco para que funcione también 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;
}
<div>
</div>
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;
}
<div class="shadow">wefwefwef</div>