sombra - CSS Box Shadow-Superior e inferior solamente
box-shadow-color (5)
Así que esta es mi primera respuesta aquí, y porque necesitaba algo similar, lo hice con pseudoelementos para 2 sombras internas y una DIV adicional para una sombra externa superior. No sé si esta es la mejor solución, pero tal vez ayudará a alguien.
HTML
<div class="shadow-block">
<div class="shadow"></div>
<div class="overlay">
<div class="overlay-inner">
content here
</div>
</div>
</div>
CSS
.overlay {
background: #f7f7f4;
height: 185px;
overflow: hidden;
position: relative;
width: 100%;
}
.overlay:before {
border-radius: 50% 50% 50% 50%;
box-shadow: 0 0 50px 2px rgba(1, 1, 1, 0.6);
content: " ";
display: block;
margin: 0 auto;
width: 80%;
}
.overlay:after {
border-radius: 50% 50% 50% 50%;
box-shadow: 0 0 70px 5px rgba(1, 1, 1, 0.5);
content: "-";
display: block;
margin: 0 auto;
position: absolute;
bottom: -65px;
left: -50%;
right: -50%;
width: 80%;
}
.shadow {
position: relative;
width:100%;
height:8px;
margin: 0 0 -22px 0;
-webkit-box-shadow: 0px 0px 50px 3px rgba(1, 1, 1, 0.6);
box-shadow: 0px 0px 50px 3px rgba(1, 1, 1, 0.6);
border-radius: 50%;
}
Posible duplicado:
soltar sombra solo abajo css3
No puedo encontrar ningún ejemplo de cómo hacerlo, pero ¿cómo puedo agregar una sombra de cuadro solo en la parte superior e inferior de un elemento?
Como ha señalado Kristian, un buen control de los valores z a menudo resolverá sus problemas.
Si eso no funciona, puede echar un vistazo a CSS Box Shadow Bottom Only al usar el desbordamiento oculto para ocultar el exceso de sombra.
También me gustaría tener en cuenta que la propiedad box-shadow puede aceptar una lista de sombras separadas por comas como esta:
box-shadow: 0px 10px 5px #888, 0px -10px 5px #888;
Esto le dará cierto control sobre la "cantidad" de sombras en cada dirección.
Eche un vistazo a http://www.css3.info/preview/box-shadow/ para más información sobre box-shadow.
Espero que esto sea lo que estabas buscando!
Después de un poco de experimentación, descubrí que un cuarto valor en la línea controla la dispersión (al menos en FF 10). Me opuse a las compensaciones verticales y les di una propagación negativa.
Aquí está el lápiz de trabajo: http://codepen.io/gillytech/pen/dlbsx
<html>
<head>
<style type="text/css">
#test {
width: 500px;
border: 1px #CCC solid;
height: 200px;
box-shadow:
inset 0px 11px 8px -10px #CCC,
inset 0px -11px 8px -10px #CCC;
}
</style>
</head>
<body>
<div id="test"></div>
</body>
</html>
¡Esto funciona perfectamente para mi!
He jugado con eso y creo que tengo una solución. El siguiente ejemplo muestra cómo configurar Box-Shadow para que solo muestre una sombra para el recuadro superior e inferior de un elemento.
Leyenda : insetOption leftPosition topPosition blurStrength spreadStrength color
Descripción
La clave para lograr esto es establecer el valor de desenfoque en <= el valor negativo del spread (por ejemplo, inserción 0px 5px -? Px 5px # 000; el valor de desenfoque debe ser -5 o menor) y también para mantener el valor de desenfoque > 0 cuando se resta del valor de posicionamiento primario (por ejemplo, utilizando el ejemplo anterior, el valor de desenfoque debe ser de -9 o superior, lo que nos da un valor óptimo para que el desenfoque esté entre -5 y -9).
Solución
.styleName {
/* for IE 8 and lower */
background-color:#888; filter: progid:DXImageTransform.Microsoft.dropShadow(color=#FFFFCC, offX=0, offY=0, positive=true);
/* for IE 9 */
box-shadow: inset 0px 2px -2px 2px rgba(255,255,204,0.7), inset 0px -2px -2px 2px rgba(255,255,204,0.7);
/* for webkit browsers */
-webkit-box-shadow: inset 0px 2px -2px 2px rgba(255,255,204,0.7), inset 0px -2px -2px 2px rgba(255,255,204,0.7);
/* for firefox 3.6+ */
-moz-box-shadow: inset 0px 2px -2px 2px rgba(255,255,204,0.7), inset 0px -2px -2px 2px rgba(255,255,204,0.7);
}
esencialmente la sombra es la forma de la caja que se encuentra justo detrás de la caja real. para ocultar partes de la sombra, necesita crear divs adicionales y establecer su índice z encima del recuadro sombreado para que la sombra no sea visible.
Si desea tener un control extremadamente específico sobre sus sombras , compárelas como imágenes y cree divisiones de contenedores con la cantidad correcta de relleno y márgenes ... luego utilice la corrección png para asegurarse de que las sombras se representen correctamente en todos los navegadores.