sombreado - Pregunta de CSS3: ¿cómo no tener sombra de cuadro en la parte superior de un div?

sombras css3 avanzadas

Question

Ahora mismo cuando hago esto:

-moz-box-shadow: 0 0 200px #00C0FF;
-webkit-box-shadow: 0 0 200px #00C0FF;
box-shadow: 0 0 200px #00C0FF;

Da una sombra de caja por todos lados. Lo quiero en 3 lados pero no en la parte superior. ¿Cómo evitar que la sombra aparezca en la parte superior?

Answer 1

Sólo tiene un desplazamiento vertical solamente :

.shadow {
  -moz-box-shadow: 0px 5px 200px #00C0FF;
  -webkit-box-shadow: 0px 5px 200px #00C0FF;
  box-shadow: 0px 5px 200px #00C0FF;
}

Esto desplazará la sombra hacia abajo para que la parte superior tenga menos sombra. Tendrá que jugar con él para obtenerlo de la forma que desee en su situación. Este sitio también tiene una gran información sobre sombras de cuadros, como capas, así como soporte de navegador.

Answer 2

Si puede anidar dos divs, entonces debería poder usar una combinación de márgenes y overflow:hidden para "cortar" la sombra superior sin perder el efecto requerido en los otros bordes.

Por ejemplo este recargo:

<div class="outer">
    <div class="inner">hello</div>
</div>

Y este css

.outer {
    margin-top: 200px;
    overflow: hidden;   
}

.inner {
    width:200px;
    height: 200px;
    margin: 0 200px 200px 200px;
    -moz-box-shadow: 0px 5px 200px #00C0FF;
    -webkit-box-shadow: 0px 5px 200px #00C0FF;
    box-shadow: 0px 5px 200px #00C0FF;
}

Da este resultado - http://jsfiddle.net/ajcw/SLTE7/2/

Answer 3

box-shadow admite comas múltiples, lo que significa que esto es posible y se puede hacer como a continuación:

box-shadow: 2px 2px 3px #888, -2px 2px 3px #888;

El primer grupo trae sombra a la derecha y abajo, mientras que el segundo grupo trae sombra a la izquierda (usando un valor negativo) y abajo.

El código completo para la compatibilidad con varios navegadores es:

-moz-box-shadow: 2px 2px 3px #888, -2px 2px 3px #888;
-webkit-box-shadow: 2px 2px 3px #888, -2px 2px 3px #888;
box-shadow: 2px 2px 3px #888, -2px 2px 3px #888;