¿Cómo crear una sombra paralela solo en un lado de un elemento?

Solución:

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

<div id="box" class="box-shadow"></div>

ACTUALIZACIÓN 3

Todas mis respuestas anteriores han estado usando un marcado adicional para crear este efecto, que no es necesariamente necesario. Creo que esto es un mucho solución más limpia … el único truco es jugar con los valores para obtener el posicionamiento correcto de la sombra, así como la fuerza / opacidad correctas de la sombra. Aquí hay un nuevo violín, usando pseudo-elementos:

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, puede hacer esto con solo un parámetro adicional para el CSS de sombra de cuadro, 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 extensión. Los valores positivos hacen que la forma de la sombra se expanda en todas las direcciones por el radio especificado. Los valores negativos hacen que la forma de la sombra se contraiga.

ACTUALIZAR

Vea 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 le gustaría 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; luego 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 el posicionamiento horizontal y el segundo valor controla el posicionamiento vertical. Así que simplemente establezca el primer valor en 0px y el segundo a cualquier compensación que desee 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 las cajas, consulte 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.

Simplemente use el parámetro de propagación 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;
}

<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 (cuarto parámetro) debe ser el mismo que el radio de desenfoque (tercer parámetro).

Si tiene un color fijo en el fondo, puede ocultar el efecto de sombra lateral con dos enmascaramiento de sombras tener el mismo color de fondo y desenfoque = 0, 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 (cambie el color de las sombras de enmascaramiento para ver cómo De Verdad obras).

div{
    width: 100px;
    height: 100px;
    border: 1px solid pink;
    box-shadow: -6px 0 white, 6px 0 white, 0 7px 5px -2px black;
}

<div></div>

---

---

Utiliza Nuestro Buscador