0

Tengo una cuadricula de elementos y cada uno tiene un box-shadow, pero el box shadow de cada elemento hermano se pone sobre el que le sigue (como es normal), lo que quiero hacer es por asi decirlo que mis box-shadow manejen un z-index menor a sus hermanos.

En esta imagen se puede observar un poco de lo que hablo

En esta imagen se puede observar un poco de lo que hablo

1 respuesta 1

2

No se como lo tienes diagramado porque no pones codigo pero en este ejemplo, la forma tradicional por asi decirlo las sombras quedan por detras

*{
 box-sizing: border-box;
}
.card{
 width: 200px;
 height: 300px;
 background-color: aqua;
 box-shadow: 30px 30px 10px #00000099;
 display: inline-block;
 margin: 5px;
}
 <div class="card"><img src="https://placeimg.com/200/300/any" alt=""></div>
 <div class="card"><img src="https://placeimg.com/200/300/any" alt=""></div>
 <div class="card"><img src="https://placeimg.com/200/300/any" alt=""></div>
</div>

EDITADO:

Pues da lo mismo si usas display grid en un contenedor padre:

*{
 box-sizing: border-box;
}
.card{
 width: 200px;
 height: 300px;
 background-color: aqua;
 box-shadow: 30px 30px 10px #00000099;
 display: inline-block;
 margin: 5px;
}
.padre{
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
 <div class="padre">
  <div class="card"><img src="https://placeimg.com/200/300/any" alt=""></div>
  <div class="card"><img src="https://placeimg.com/200/300/any" alt=""></div>
  <div class="card"><img src="https://placeimg.com/200/300/any" alt=""></div>
  <div class="card"><img src="https://placeimg.com/200/300/any" alt=""></div>
  <div class="card"><img src="https://placeimg.com/200/300/any" alt=""></div>
  <div class="card"><img src="https://placeimg.com/200/300/any" alt=""></div>
  <div class="card"><img src="https://placeimg.com/200/300/any" alt=""></div>
  <div class="card"><img src="https://placeimg.com/200/300/any" alt=""></div>
  <div class="card"><img src="https://placeimg.com/200/300/any" alt=""></div>
  <div class="card"><img src="https://placeimg.com/200/300/any" alt=""></div>
  <div class="card"><img src="https://placeimg.com/200/300/any" alt=""></div>
  <div class="card"><img src="https://placeimg.com/200/300/any" alt=""></div>
 </div>

Ahi lo tienes, con grid responsive incluida...

1
  • Estoy usando display grid en el elemento padre
    – LexxCh
    Commented el 1 abr. 2022 a las 2:10

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.