css - examples - box shadow top

Haz que CSS inserte box-shadow para que aparezca en la parte superior de los fondos internos

Question

Quiero que aparezca una sombra de recuadro CSS en la parte superior de los elementos dentro del contenedor con la sombra de caja, específicamente los colores de fondo de los elementos secundarios.

Demostración: http://jsfiddle.net/Q8n77/

<div class="parent">
foo
<div class="content">bar</div>
</div>
<style>
.parent {
box-shadow : inset 0 0 5px 0 black;
}
.content {
background : #EEE;
}
</style>

¿Algunas ideas? Puede hacer lo que sea con el HTML, pero debe ser capaz de hacer clic, por lo que no hay DIV 100% ancho / alto por encima de todo.

Answer 1

Agregando este enfoque, ya que así es como resolví mi versión de este problema.

Básicamente, agrego un :: before, u otro elemento con una sombra paralela en el padre, pero lo compenso para que solo se muestre la parte de la sombra. También le doy al padre un desbordamiento: oculto. De esta manera, el contenido aún debe ser interactivo. :)

El kilometraje puede variar dependiendo del marcado exacto, por supuesto. Pero pensé que debería añadir esto aquí.

codepen: http://codepen.io/mephysto/pen/bNPVVr

.parent {
background:#FFF;
width: 500px;
height: 200px;
margin: 0 auto;
overflow: hidden;
}
.parent::before{
content:"";
display:block;
width:100%;
height:25px;
margin-top:-25px;
box-shadow : 0px 0px 25px 0px rgba(0,0,0,0.9);
}

Answer 2

No todos tienen la capacidad de cambiar la estructura HTML. Si solo puede acceder al CSS, puede intentar lo siguiente en esta publicación: https://.com/a/13188894/491044

Alternativamente, puedes usar un pseudo elemento:

HTML:

<div>
a
</div>​

CSS:

div {
height:300px;
color:red;
position:relative;
}
div:before {
content:'''';
display:block;
box-shadow:inset 0 0 10px black;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}​

Answer 3

Puede establecer box-shadow en padre e hijo.

Answer 4

Si solo necesitas una sombra en la parte superior, esto lo hará:

.element
{
box-shadow:inset 0px 3px 3px #BBB;
}

Answer 5

Si todo lo que necesita es que se muestre la sombra insertada a través de los colores de fondo, puede usar colores rgba (o hsla) transparentes en lugar de códigos hexadecimales;

.parent {
box-shadow: inset 0 0 5px 0 black;
}
.content {
background-color: rgba(0, 0, 0, .2); /* .2 = 20% opacity */
}

Demostración en http://jsfiddle.net/Q8n77/7/

Answer 6

Una posibilidad es jugar con el padding .

.parent {
box-shadow : inset 0 0 5px 0 black; padding:.23em;
}

http://jsfiddle.net/jasongennaro/Q8n77/6/

Answer 7

podría intentar colocar un div de superposición encima de su padre con position: absolute; y dale a eso la sombra (teoría no probada) con algo como esto:

HTML

<div class="parent">
<div class="overlay"></div>
foo
<div class="content">bar</div>
</div>

CSS

.parent {
position: relative;
}
.content {
background : #EEE;
}
.parent .overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
box-shadow : inset 0 0 5px 0 black;
}