En este artículo vamos a crear un diseño de unas tarjetas en HTML y CSS que podrás usar para un Blog o cualquier página web.
Y sí, sé lo que estás pensando: no vamos a tardar mucho en hacerlo. De hecho, vamos a ir bastante rápido.
Además, realizaremos un diseño responsivo para que el conjunto de tarjetas se vean bien en todos los dispositivos y pantallas.
Primero emparemos con la estructura HTML, luego maquetaremos las tarjetas con CSS y finalmente convertiremos nuestro diseño en responsivo de una forma rápida y sencilla.
Tarjetas en HTML
Primero, creamos un envoltorio con la clase card-wrap. Dentro de este envoltorio, vamos a crear nuestra primera tarjeta usando el elemento article de HTML5 con la clase card.
<div class="card-wrap">
<article class="card">
<header class="header-card">
<img src="/img/foto-1.jpg" alt="">
</header>
<footer>
<div class="categoria-card">
<span>Categoria</span>
</div>
<div class="texto-card">
<h3>Lorem ipsum dolor sit.</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. In minima fugit eos excepturi aspernatur quibusdam soluta maxime magnam quis. Cum perferendis fuga a eius sunt?</p>
</div>
<div class="perfil-card">
<div class="img-perfil-card">
<img src="/img/perfil-1.jpg" alt="">
</div>
<div class="text-perfil-card">
<span>Nombre</span>
<span>Fecha</span>
</div>
</div>
</footer>
</article>
<article class="card">
<header class="header-card">
<img src="img/foto-2.jpg" alt="">
</header>
<footer>
<div class="categoria-card">
<span>Categoria</span>
</div>
<div class="texto-card">
<h3>Lorem ipsum dolor sit.</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. In minima fugit eos excepturi aspernatur quibusdam soluta maxime magnam quis. Cum perferendis fuga a eius sunt?</p>
</div>
<div class="perfil-card">
<div class="img-perfil-card">
<img src="/img/perfil-2.jpg" alt="">
</div>
<div class="text-perfil-card">
<span>Nombre</span>
<span>Fecha</span>
</div>
</div>
</footer>
</article>
<article class="card">
<header class="header-card">
<img src="https://images.unsplash.com/photo-1642945538257-d1e69abfb085?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1032&q=80" alt="">
</header>
<footer>
<div class="categoria-card">
<span>Categoria</span>
</div>
<div class="texto-card">
<h3>Lorem ipsum dolor sit.</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. In minima fugit eos excepturi aspernatur quibusdam soluta maxime magnam quis. Cum perferendis fuga a eius sunt?</p>
</div>
<div class="perfil-card">
<div class="img-perfil-card">
<img src="img/perfil-3.jpg" alt="">
</div>
<div class="text-perfil-card">
<span>Nombre</span>
<span>Fecha</span>
</div>
</div>
</footer>
</article>
</div>Dentro del article, vamos a dividir la tarjeta en diferentes secciones usando las etiquetas header y footer. En el header, colocamos la imagen y en el footer, vamos a tener la categoría, el texto y la imagen del perfil.
Tarjetas en CSS
Ahora, vamos a la hoja de estilos para empezar a maquetar nuestras tarjetas. Primero, cambiamos la fuente a «Helvetica Sans». Luego, trabajamos con la etiqueta img para asegurarnos de que las imágenes ocupen todo el ancho del recuadro en el que se encuentran.
Para el article con la clase card, le damos un ancho máximo de 350 píxeles, un color de fondo, un borde redondeado y una sombra.
body{
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
img{
max-width: 100%;
}
article.card{
max-width: 350px;
background-color: #f8f8f8;
border-radius: 8px;
margin: 1rem;
box-shadow: 0px 0px 12px #d7d7d7;
}
.header-card img{
border-radius: 8px 8px 0 0;
max-height: 200px;
height: 200px;
width: 100%;
}
.categoria-card{
margin-top: 1rem;
}
.categoria-card span{
background: #25c4d8;
border-radius: 4px;
padding: 0.2rem 0.5rem;
color: #fff;
}
.card footer{
padding: 0 1rem;
}
.perfil-card{
display: flex;
align-items: center;
}
.img-perfil-card{
display: flex;
}
.img-perfil-card img{
width: 50px;
border-radius: 50%;
margin: 1rem 1rem 1rem 0;
}
.text-perfil-card{
display: flex;
flex-flow: column;
}
.text-perfil-card span:nth-child(2){
color: #cfcfcf;
}
Para la imagen en el header, le damos un borde redondeado en la parte superior y un alto y ancho específicos.
Para la categoría, le damos un fondo de color y un borde redondeado. Y para el perfil, usamos display: flex y align-items: center para centrar todo.
Si tienes alguna pregunta déjala en los comentarios y te responderé lo antes posible.
Haciéndolo Responsive
Para hacer que nuestras tarjetas sean responsivas, simplemente trabajamos con el envoltorio card-wrap y le damos un display: flex y un flex-flow: wrap.
.card-wrap{
display: flex;
flex-flow: wrap;
}De esta manera, las tarjetas se mostrarán en varias columnas dependiendo del ancho de la pantalla.
¿Por qué usar header y footer?
Es cada vez más recomendable marcar nuestra estructura en HTML de la forma más clara posible. Esto podría ayudar en el posicionamiento en buscadores como Google.
Y eso es todo por hoy, ya tenemos nuestras tarjetas acabadas.
Ahora sabes cómo hacer estas tarjetas para tu blog. Si tienes alguna duda o sugerencia, déjala en los comentarios. Nos vemos en el próximo vídeo. ¡Adiós!