0

Más allá de las otras diferencias que tiene, no sé cómo imitar esa especie de box-shadow que tiene en el borde inferior la tarjeta. Adjunto imágenes del diseño objetivo y el que yo he planteado.

Adjunto código de mi planteo de la tarjeta:

.card {
    border: 1px solid transparent;
    border-radius: 5px;
    box-shadow: 0 0 1.5px rgba(0, 0, 0, .5);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    width: 100%;
}

Diseño objetivo

Diseño planteado

0

1 respuesta 1

3

La documentación necesaria la encuentras en Box-shadow

/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

Hay una caja por detrás;

  • offset-x: la mueve horizontalmente
  • offset-y: la mueve verticalmente
  • blur-radius: hace que el borde se vea borroso gradualmente
  • spread-radius: el radio adicional de la caja de atrás

puedes probar en el siguiente snippet:

:root {
    --offset-x: 0px;
    --offset-y: 10px;
    --blur-radius: 15px;
    --spread-radius: 0px;
}
.card {
    border: 1px solid transparent;
    border-radius: 5px;
    box-shadow: var(--offset-x) var(--offset-y) var(--blur-radius) var(--spread-radius) rgba(0, 0, 0, .5);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    width: 40%;
    
}
<div style="text-align: -webkit-center;margin-top: 5rem;"><div id="card" class="card">hola</div></div>
offset-x<input id="offset-x" type="range" onchange="document.documentElement.style.setProperty('--offset-x', (this.value-50+'px'))"><br>
offset-y<input id="offset-y" type="range" onchange="document.documentElement.style.setProperty('--offset-y', (this.value-50+'px'))"><br>
blur-radius<input id="blur-radius" type="range" onchange="document.documentElement.style.setProperty('--blur-radius', (this.value+'px'))"><br>
spread-radius<input id="spread-radius" type="range" onchange="document.documentElement.style.setProperty('--spread-radius', (this.value+'px'))"><br>

En particular el de la imagen que compartes está como 10 pixeles más abajo y el borde un poco borroso, entonces: box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.2);

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.