css - puedo - ¿Cómo elimino solo la parte superior de un cuadro de sombra?

no puedo usar elementor

Question

Estoy usando border-radius y box-shadow para hacer un resplandor alrededor de un elemento.

¿Puedo eliminar solo la parte superior de la box-shadow ?

Ejemplo vivo

div {
    margin-top: 25px;
    color: #fff;
    height: 45px;
    margin-top: -5px;
    z-index: -10;
    padding: 26px 24px 46px;
    font-weight: normal;
    background: #000; /*#fff;*/
    border-top: 0px solid #e5e5e5;
    border-left: 1px solid #e5e5e5;
    border-right: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    -webkit-border-radius: 3px;
     -khtml-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
    -webkit-box-shadow: rgba(200,200,200,0.7) 0px 0px 10px 0px;
     -khtml-box-shadow: rgba(200,200,200,0.7) 0px 0px 10px 0px;
       -moz-box-shadow: rgba(200,200,200,0.7) 0px 0px 10px 0px;
            box-shadow: rgba(200,200,200,0.7) 0px 0px 10px 0px;
}

Edit: esta cosita es el problema!

Answer 1

@milo; no es su borde superior, es una shadow que da en su código

Para eliminar el brillo superior, debe definir el espaciado vertical de su sombra.

Escribe esto en tu sombra css:

box-shadow:0 3px 6px 0 rgba(200, 200, 200, 0.7) ;
-moz-box-shadow:0 3px 6px 0 rgba(200, 200, 200, 0.7) ;
-webkit-box-shadow:0 3px 6px 0 rgba(200, 200, 200, 0.7) ;
-khtml-box-shadow:0 3px 6px 0 rgba(200, 200, 200, 0.7) ;

& tu puedes generar desde aquí http://css3generator.com/

NOTA: hay cuatro propiedades de sombra: horizontal, vertical, blur & spread para la sombra interior que puede definir para su inset

Answer 2

Esto funciona, pero debo admitir que no sé si hay una mejor manera (o si es posible sin agregar un elemento de envoltura). Usar varias box-shadow sería una buena idea, pero parece que no puedo hacer que se vea igual.

Consulte: http://jsfiddle.net/thirtydot/8qEUc/3/

HTML:

<div id="bla">
    <div> something </div>
</div>

CSS:

#bla {
    overflow-y: hidden;
    padding: 0 10px 10px 10px;
    margin: 0 -10px
}
#bla > div {
    /* the CSS from your question here */
}

Answer 3

Puedes probar lo siguiente. Mi método solo utiliza CSS .

Ejemplo de enlace: http://jsfiddle.net/kL8tR/56/

div{
    margin-top: 25px;
    color: #fff;
    height: 45px;

    padding: 26px 24px 46px;

    border-left: 1px solid #e5e5e5;
    border-right: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    border-top: none;

    -moz-box-shadow: 0 0 10px 1px black,  0px -20px black, 0px 1px 10px rgba(255,255,255,0.7);
    -webkit-box-shadow: 0 0 10px 1px black,  0px -20px black, 0px 1px 10px rgba(255,255,255,0.7);
    box-shadow: 0 0 10px 1px black,  0px -20px black, 0px 1px 10px rgba(255,255,255,0.7);

}

Básicamente, lo que estoy haciendo, estoy creando sombras de múltiples capas, por lo que la primera sombra se superpone a la segunda capa, enmascarando la sección superior.

He usado esto antes, aquí está mi referencia:

Mire en la sección - Capas múltiples sombras [ http://www.css3.info/preview/box-shadow/ ]

Answer 4

Ya que usa box-shadow, puede usar un pseudo-elemento para crearlo y colocarlo debajo de su div, colocándolo de modo que solo las partes necesarias sean visibles: http://jsfiddle.net/kL8tR/60/

Hay algunas notas importantes:

• El pseudo-elemento debe tener z-index: -1
• El div en sí debe tener una position: relative y sin z-index

Pseudo-elementos + CSS3 = awesomeness :)

Answer 5

simplemente puede desplazar la sombra hacia abajo (desplazamiento vertical) y reducir el radio de la sombra, algo a lo largo de las líneas de (reemplace el asterisco con la cantidad de píxeles necesarios para cubrir la sombra superior con el cuadro mismo):

box-shadow: 0 *px 10px 0 rgba(200,200,200,0.7);