Las tarjetas en CSS son una excelente manera de presentar productos, artículos o contenido de forma estructurada y visualmente atractiva. En esta publicación, aprenderemos a diseñar una tienda de productos con tarjetas estilizadas, utilizando CSS Grid y efectos interactivos con transiciones y sombras.
1. Estructura de la Página
Vamos a construir una cuadrícula de productos con tarjetas individuales. Cada tarjeta mostrará:
✅ Una imagen del producto.
✅ Un nombre y descripción.
✅ Un precio.
✅ Un botón de compra con efecto hover.
Código HTML
✅ Explicación:
- Creamos una estructura HTML sencilla con un título y un div que contendrá nuestras tarjetas (product-grid).
- Cada tarjeta (product-card) incluye una imagen, nombre, descripción, precio y botón.
2. Estilos en CSS
Para mejorar la presentación de las tarjetas, agregamos estilos en styles.css:
✅ Explicación:
- grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); permite que las tarjetas se adapten automáticamente a la pantalla.
- box-shadow crea un efecto de sombra para resaltar cada tarjeta.
- transition: transform 0.3s ease; y hover generan un efecto de agrandamiento al pasar el ratón.
- object-fit: cover; mantiene el tamaño de la imagen sin distorsionarla.
- Los botones de compra tienen un efecto hover para mejorar la experiencia del usuario.
Hemos aprendido a crear tarjetas de productos interactivas con CSS Grid, agregando efectos visuales y transiciones suaves. 🚀
📢 ¿Tienes dudas o sugerencias? Déjalas en los comentarios y seguimos aprendiendo juntos! 🎨🔥
No hay comentarios.:
Publicar un comentario