La Mejor solución
Freelance
Menu
Buscar en la base de conocimientos
< Todos los temas
Imprimir

Diseño de Tarjetas Responsivas con CSS

Publicado

Introducción

El uso de tarjetas (cards) en el diseño web se ha vuelto muy popular. Son versátiles, fáciles de entender visualmente y se adaptan bien a dispositivos móviles y de escritorio. En este artículo, aprenderás a crear tarjetas con CSS puro, que incluyen sombras, transiciones y diseño responsivo.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tarjetas con CSS</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Arial', sans-serif;
            background-color: #f4f4f9;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        .contenedor-tarjetas {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px;
            padding: 20px;
        }

        .tarjeta {
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            width: 300px;
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .tarjeta:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }

        .tarjeta img {
            width: 100%;
            height: auto;
        }

        .tarjeta .contenido {
            padding: 20px;
            text-align: center;
        }

        .tarjeta .contenido h3 {
            margin-bottom: 10px;
            font-size: 1.5em;
            color: #333;
        }

        .tarjeta .contenido p {
            color: #666;
            font-size: 1em;
            line-height: 1.6;
        }

        @media (max-width: 768px) {
            .tarjeta {
                width: 90%;
            }
        }
    </style>
</head>
<body>

    <div class="contenedor-tarjetas">
        <div class="tarjeta">
            <img src="https://via.placeholder.com/300" alt="Imagen de tarjeta">
            <div class="contenido">
                <h3>Título 1</h3>
                <p>Descripción breve de la tarjeta. Ideal para presentar información concisa.</p>
            </div>
        </div>

        <div class="tarjeta">
            <img src="https://via.placeholder.com/300" alt="Imagen de tarjeta">
            <div class="contenido">
                <h3>Título 2</h3>
                <p>Otro contenido que se adapta bien a diferentes tamaños de pantalla.</p>
            </div>
        </div>

        <div class="tarjeta">
            <img src="https://via.placeholder.com/300" alt="Imagen de tarjeta">
            <div class="contenido">
                <h3>Título 3</h3>
                <p>Diseño limpio y moderno, perfecto para cualquier tipo de proyecto web.</p>
            </div>
        </div>
    </div>

</body>
</html>

Explicación del Código

  1. Estilo Global
    • Se aplica box-sizing: border-box; a todos los elementos para manejar mejor el espaciado y el tamaño.
    • El body utiliza flexbox para centrar las tarjetas vertical y horizontalmente.
  2. Contenedor de Tarjetas
    • El contenedor contenedor-tarjetas usa flex-wrap para permitir que las tarjetas se acomoden en filas múltiples si no caben en una sola fila.
    • Se añade gap: 20px para generar espacio entre las tarjetas.
  3. Diseño de la Tarjeta
    • Cada tarjeta tiene un borde redondeado (border-radius: 10px) y una sombra ligera (box-shadow).
    • Al pasar el cursor (:hover), la tarjeta se eleva visualmente usando transform: translateY(-10px) y una sombra más pronunciada.
  4. Imágenes y Contenido
    • Las imágenes son responsivas (width: 100%).
    • El contenido tiene un relleno interno (padding: 20px) y se centra con text-align: center.
  5. Responsividad
    • Con una regla @media, las tarjetas ocupan el 90% del ancho en pantallas menores a 768px, lo que garantiza una experiencia fluida en móviles.

Personalización

Puedes personalizar este código de varias maneras:

  • Colores: Cambia el color de fondo (background-color) y los textos (color).
  • Sombras: Ajusta la intensidad de las sombras (box-shadow) para lograr un efecto más dramático.
  • Animaciones: Experimenta con diferentes transformaciones (transform) para agregar rotación o escalado.

Conclusión

El diseño de tarjetas con CSS puro es una forma sencilla y efectiva de mejorar la apariencia de un sitio web. Estas tarjetas no solo son estéticas, sino que también ofrecen una excelente experiencia de usuario, adaptándose perfectamente a diferentes dispositivos.

Sidebar