Una tarjeta en CSS

Una tarjeta es una caja con sombra hasta que decides cómo se comporta cuando es alta.

.card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  background: white;
  overflow: clip;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.06);
  transition: box-shadow 150ms ease, translate 150ms ease;
}

.card:hover {
  box-shadow: 0 8px 24px rgb(15 23 42 / 0.1);
  translate: 0 -2px;
}

.card img { inline-size: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

Cómo funciona

1. Un grid con 1fr en el medio fija el pie al fondo.
2. overflow: clip mantiene honesto un radio de esquina alrededor de una imagen.
3. La sombra del hover se mueve; el layout no, así que nada se reacomoda.

Palabras clave y builtins usados aquí

• background
• border
• display
• gap
• grid
• ms
• overflow
• padding
• px
• rem
• rgb
• transition
• translate

El intento, en números

Líneas

19

Caracteres a escribir

430

Tokens

121

Ritmo de tres estrellas

85 tpm

Al ritmo de tres estrellas de 85 tokens por minuto, este intento toma unos 85 segundos.

Escribe este fragmento

Paso 1 de 4 en Superficies; paso 3 de 13 en Dar estilo a componentes.

← Anterior Siguiente →