Crear una card en CSS: tutorial de Card UI paso a paso

En este tutorial voy a enseñarte a crear una tarjeta («card» en inglés). Una card sirve para mostrar al usuario un extracto de un artículo junto a su imagen y animarle a hacer clic para leerlo. Está hecha únicamente con HTML y CSS. He querido usar una propiedad poco habitual, filter, que aplica un tratamiento sobre una imagen, y he añadido además una transición para darle dinamismo.

See the Pen
Card UI CSS by Damien Flandrin (@dam62500)
on CodePen.

Paso 1 – Esquematizar y montar el código HTML

Antes de escribir el HTML, imagina primero su estructura. Cuando tienes una maqueta, tómate el tiempo de pensar la estructura de tu sitio o de tus módulos CSS. No dudes en hacer bocetos en un papel para esquematizarla. ¡Un HTML bien estructurado te facilitará mucho el desarrollo después!

<div class="card">
    <a href="https://www.gekkode.com/es/blog/post/#">
        <!-- Image à la une -->
        <div class="card-image"><img src="https://www.gekkode.com/wp-content/uploads/2021/08/orange.jpeg" alt="Orange" /></div>
        <!-- Fin de l'image à la une -->

<!-- Corp de notre carte -->
        <div class="card-body">

<!-- Date de publication de l'article-->
            <div class="card-date">
                <time>20 Novembre 1992</time>
            </div>

<!-- Titre de l'article -->
            <div class="card-title">
                <h3>Lorem Ipsum</h3>
            </div>
            <!-- Extrait de l'article -->
            <div class="card-excerpt">
                <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam voluptatibus autem consectetur voluptate facere at, omnis ab optio placeat officiis! Animi modi harum enim quia veniam consectetur unde autem inventore.</p>
            </div>

</div>
        <!-- Fin du corp de notre carte -->
    </a>
</div>

Paso 2 – Definir las reglas base y dar estilo al módulo

Una vez puestas las bases del HTML, empezamos a escribir el CSS. Para ello vamos a retomar cada parte del esquema.

Este estilo se escribe igual de bien en SCSS, con una variable para el color de la sombra y anidamiento para el estado de hover. Hace falta entonces un paso de compilación: consulta compilar SCSS en un build de Webpack.

.card

.card {
  width: 400px; /*1*/
  margin: 0px auto; /*2*/
  background-color: white; /*3*/
  box-shadow: 0px 5px 20px #999; /*4*/
}
.card a { /*5*/
  color: #333;
  text-decoration: none;
}
.card:hover .card-image img { /*6*/
  width: 160%;
  filter: grayscale(0);
}

1. Definimos un tamaño fijo para la card.
2. La centramos con margin: 0px auto; ojo con estar en display: block.
3. La ponemos en blanco: por defecto he puesto un fondo algo más oscuro en el body para diferenciar bien la card del cuerpo de la página.
4. Le añadimos una sombra ligera para crear un efecto de superposición respecto a la página.
5. Definimos el estilo base de los enlaces dentro del módulo .card.
6. Para aportar dinamismo, como decía antes, le indicamos al navegador que, en cuanto el visitante pase por encima de la card, esta se agrande con width y recupere los colores, ya que vamos a aplicar por defecto un filtro en blanco y negro sobre la imagen desde .card-image.

.card-image

.card-image {
  height: 250px;/*1*/
  position: relative;/*2*/
  overflow: hidden;/*3*/
}
.card-image img {
  width: 150%;/*4*/
    /*5 - Método de centrado en función del tamaño de la imagen */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: grayscale(1);/*6*/
    /*7 - Transición */
  transition-property: filter width;
  transition-duration: .3s;
  transition-timing-function: ease;
}

1. Fijamos el tamaño del bloque que va a contener la imagen, ese tamaño fijo nos permite respetar la misma medida entre todas las imágenes si hay varias cards.
2. Fijamos la posición del elemento en relative, porque va a contener elementos absolute dentro.
3. Ocultamos todo lo que pueda desbordar del bloque.
4. Fijamos el tamaño de la imagen al 100%. Puedes aumentar el tamaño por defecto según tus necesidades, pero no uses imágenes de menos de 400px y no olvides respetar su relación ancho/alto para evitar zonas en blanco.
5. Este método permite centrar una imagen respecto a su propio tamaño y al de su elemento padre. La idea es que el punto de origen de su visualización sea el centro de .card-image, después, con transform, redefinimos su posición en función del tamaño de la imagen para dejarla justo en el centro de .card-image.
6. La propiedad filter permite aplicar un filtro sobre una imagen, aquí queremos aplicar por defecto un filtro en blanco y negro, grayscale, y devolverle los colores cuando el usuario pase por encima de la card.
7. Para dar dinamismo, aplicamos a las dos propiedades, filter y width, un efecto de transición de 300ms.

.card-body

.card-body {
    text-align:center;  /*1*/
  padding: 15px 20px; /*2*/
  box-sizing: border-box; /*3*/
}

1. Alineamos todos los elementos dentro de .card-body.
2. Para que los elementos no queden pegados, aplicamos un relleno con la propiedad padding.
3. Y aplicamos, si no está ya por defecto, box-sizing con el valor border-box, para que el padding quede incluido en el bloque y no se sume a él.

La tipografía

.card-date {
  font-family: 'Source Sans Pro', sans-serif;
}

.card-title, .card-excerpt {
   font-family: 'Playfair Display', serif;
}

.card-date, .card-title {
  text-align:center;
  text-transform:uppercase;
  font-weight: bold;
}

.card-date, .card-excerpt {
  color: #777;
}

Como habrás visto, aquí definimos el estilo del texto: he usado Source Sans Pro sans-serif y Playfair Display serif como tipografías, más algunos ajustes de formato.