css - drop - ¿Por qué no inserta box-shadow en las imágenes?

box-shadow gradient css

Question

Tengo un contenedor que usa la sombra de la caja insertada. El contenedor contiene imágenes y texto. La sombra del recuadro aparentemente no funciona en las imágenes:

La sección blanca aquí es el contenedor. Contiene una imagen blanca y se le aplica una sombra de cuadro insertada.

<main>
    <img src="whiteimage.png">
</main>

body {
    background-color: #000000;
}

main {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 90%;
    height: 90%;
    background-color: #FFFFFF;
    box-shadow: inset 3px 3px 10px 0 #000000;
}

¿Hay alguna manera de hacer que las imágenes superpuestas de la sombra del cuadro insertado?

Demo en vivo

Answer 1

Como dijo Rilus, podríamos usar una pseudoclase. Lamentablemente, esto no parece funcionar en una etiqueta img por alguna razón, sin embargo, podemos utilizar una combinación de contenedores internos y externos para lograr el efecto que necesitamos.

.outer:hover .inner:after {
position: absolute;
content: '''';
color: white;
display:block;
bottom: -0px;
right: -0px;
width: 100%;
height: 100%;
z-index: 11;
border: solid 10px red;
}

http://jsbin.com/kabiwidego/1/

no estoy seguro acerca de ie 10, ya que parece manejar pseudo clases que están absolutamente posicionadas de forma ligeramente diferente a la mayoría de los navegadores.

Answer 2

Como la sombra es parte del contenedor primario, se muestra debajo de la imagen. Una alternativa es tener un div que coloque una sombra sobre la imagen así:

<main>
    <img src="https://upload.wikimedia.org/wikipedia/commons/d/d2/Solid_white.png" />
    <div class="shadow"></div>
</main>

CSS:

.shadow {
    position: absolute;
    width: 100%;
    height: 100%;
    box-shadow: inset 3px 3px 10px 0 #000000;
    border-radius: 20px;
    top: 0;
    left: 0;
}

Editar: he actualizado el violín para incluir el radio de borde en la sombra y en el img que resuelve el problema identificado en los comentarios.

https://jsfiddle.net/WymFE/3/

Answer 3

En su lugar, podría establecer la imagen como fondo del div:

background-image:url(http://www.placehold.it/500x500)

Ejemplo jsFiddle

Answer 4

La razón por la que no se superpone es porque la imagen está dentro del div, por lo que la imagen está en la parte superior. La imagen es más alta (más cerca del usuario) que la div.

Puede cambiar la imagen para usar la position: relative; z-index: -1 position: relative; z-index: -1 , y haz que el div que lo contiene utilice un borde en lugar de establecer el color de fondo en el cuerpo. Tendrá que usar box-sizing: border-box para incluir el borde en el ancho del div.

DEMO

body {
    background-color: #FFF;
}

main {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border: 60px solid black;
    box-shadow: inset 3px 3px 10px 0 #000000;
    box-sizing: border-box;
}

img {
    z-index:-1;
    position: relative;
}

Answer 5

Para aquellos que están usando posicionados absolutos, de tamaño completo: antes / después de los pseudo elementos, considere usar pointer-events: none en el pseudo-elemento para que los elementos originales puedan seguir siendo clicables.

Answer 6

Solo para hablar sobre esto, porque solo estaba creando algo similar ...

Odio contaminar mi marca con elementos adicionales por el estilo, por lo que la solución CSS es usar el elemento pseudo:

main::after
{
 box-shadow: inset 3px 3px 10px 0 #000000;
 content: '''';
 display: block;
 height: 100%;
 position: absolute;
 top: 0;
 width: 100%;
}

Probablemente sea demasiado tarde para lo que estabas tratando de hacer, pero es la mejor solución en mi opinión.

Answer 7

Una solución simple si eres inteligente con tus decimales es almacenar tu contenido en un div separado que luego seleccionas e implementas un cierto número de píxeles desde la parte superior.

Por ejemplo, digamos que su encabezado tiene una altura de 50 px. Podría comenzar su #content div id 53.45px desde la parte superior (o la altura que tenga su sombra paralela) y luego aparecerá su sombra sobre las imágenes.

Un problema con esto es que si está utilizando una sombra bastante transparente, cuanto más transarent es, más hortera puede parecer al implementar este CSS.

En la práctica, el código sería el siguiente:

HTML:

  <header>
Whatever''s in your header
</header>

<div id="content>
Page content
</div>

CSS:

header {
    height: 50px;
    box-shadow: 0 5px 5px rgba(0,0,0,1);
}

#content {
    top: 55px;
}