Diseñando nuestras cards

¿Cómo crear tarjetas personalizadas con HTML y CSS?

Crear tarjetas con un diseño atractivo es esencial en cualquier sitio web moderno. En esta sesión, vamos a aprender a conceptualizar y codificar tarjetas utilizando HTML y CSS, tomando como referencia un diseño creado en Figma. El enfoque estará en estructurar el diseño, definir los estilos y aprender algunos trucos para optimizar el diseño visual utilizando sombras y bordes redondeados.

¿Cómo se estructura una tarjeta en HTML?

Para empezar, es crucial definir la estructura básica de nuestra tarjeta en HTML. La tarjeta estará compuesta principalmente por dos secciones: la imagen y el texto.

<div class="tarjeta">
    <div class="tarjeta-imagen"></div>
    <div class="tarjeta-texto">
        <p class="titulo">Noruega</p>
        <p class="descripcion">Paisajes increíbles</p>
    </div>
</div>

En este fragmento, creamos un div principal que contiene dos subsecciones. La primera, tarjeta-imagen, es donde se colocará la imagen de fondo, y la segunda, tarjeta-texto, contiene el título y la descripción de nuestra tarjeta.

¿Cómo aplicamos estilos mediante CSS?

Con la estructura lista, es momento de aplicar los estilos. La apariencia de nuestras tarjetas dependerá mucho del CSS que implementemos.

.tarjeta {
    width: 48%;
    height: 64%;
    background-color: #ffffff;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    border-radius: 10px;
    overflow: hidden;
}

.tarjeta-imagen {
    width: 100%;
    height: 60%;
    background-image: url('noruega.png');
    background-size: cover;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.tarjeta-texto {
    width: 100%;
    height: 40%;
    background-color: #f0f0f0;
    padding: 10px;
    color: #333;
}

.titulo {
    font-size: 1.5em;
    font-weight: bold;
}

.descripcion {
    font-size: 1em;
}

• Estilos generales: La tarjeta recibe un width y height específicos, junto a un box-shadow para un efecto de sombra sutil que realza su presencia.
• Imagen de fondo: Se utiliza background-size: cover; para asegurar que la imagen cubra todo el contenedor, sin alterar sus proporciones.
• Textos: Los textos tienen estilos diferenciados por tamaño y peso para destacar el título sobre la descripción.

¿Cómo aseguramos la coherencia del diseño?

• Redondeado: Los border-radius aseguran que los extremos de las tarjetas y de la imagen se vean consistentemente redondeados.
• Sombra: Jugar con diferentes tamaños y difuminados de sombra enriquecerá el efecto visual.
• Espaciado: El uso de padding en los textos evita que la información quede pegada a los bordes, creando un respiro visual.

¿Qué más se puede personalizar?

Este diseño es solo un punto de partida. Te animamos a:

• Experimentar con colores: Cambia background-color en los contenedores para adaptarse mejor a la estética general del portfolio.
• Modificar fuentes: ¡Atrévete con diferentes tipografías para reforzar la temática de tu sitio web!
• Ajustar dimensiones: Personaliza width y height según las necesidades del contenido que desees exhibir.

Continúa practicando y retando tu creatividad a medida que creas y refinas tus tarjetas. ¡Esperamos verte en la próxima lección donde profundizaremos en la abstracción y reutilización de componentes para otro nivel de eficiencia en tu desarrollo web!