Creación de componentes de tarjeta personalizados con HTML y CSS

Si bien los componentes de la tarjeta pueden parecer simples, existen criterios específicos que se deben tener en cuenta al crearlos. Encontrará varios tipos de componentes de tarjeta para empezar y, como desarrollador web, debe asegurarse de que su interfaz sea accesible.

Descubra cómo crear componentes de tarjetas con HTML y CSS y conozca las consideraciones de accesibilidad y la personalización.

Estructura HTML para componentes de tarjeta

La anatomía de una tarjeta incluye el contenedor de la tarjeta, su encabezado, imagen y cuerpo, y un pie de página de tarjeta opcional.

Creará tres componentes de tarjeta simples: contenido, producto y tarjetas de perfil. Estos son algunos de los tipos de tarjetas más comunes que se encuentran en la web.

Comience creando un contenedor div, anidando tres etiquetas div más con atributos de clase para cada tarjeta dentro de él, con elementos secundarios apropiados para cada una de las tres tarjetas. Debe utilizar elementos que representen todas las partes de la anatomía de la tarjeta. Por ejemplo, la tarjeta de contenido tiene una etiqueta de imagen para los medios, una etiqueta h3 para el título y una etiqueta p para el texto.

<divisiónclase="tarjeta-contenedor">
 Tarjeta de contenido 
<divisiónclase="tarjeta de contenido">
<imagenorigen=" https://images.unsplash.com/photo-1500989145603-8e7ef71d639e? ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=formato&fit=recorte&w=200&q=80"alternativa="Un espacio de trabajo con una libreta con teclado, una taza de café y un auricular">
<h3>Títuloh3>
<pag>Lorem ipsum dolor sit amet consectetur adipisicing elit. Anuncio
 excepturi explicabo molestiae natus magnam rem...pag>
<ahref="#">Leer mása>
división>
 Tarjeta de producto 
<divisiónclase="tarjeta-producto">
<imagenorigen=" https://images.unsplash.com/photo-1505740420928-5e560c06d30e? ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=formato&fit=recorte&w=200&q=80"alternativa="Auriculares sobre un fondo amarillo">
<h3>nombre del productoh3>
<pag>$19.99pag>
<pag>Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Aspernatur, voluptatibus.pag>
<ahref="#"><botón>añadir a la cestabotón>a>
división>
 Tarjeta de perfil 
<divisiónclase="tarjeta-perfil">
<imagenorigen=" https://images.unsplash.com/photo-1535713875002-d1d0cf377fde? ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=formato&fit=recorte&w=200&q=80"alternativa="Un hombre blanco con una camisa negra con botones">
<h3>Juan Pérezh3>
<pag>Desarrollador webpag>
<pag>Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Expedita tempora eos molestias repellat?pag>
<ahref="#"clase="perfil-enlace">Ver perfila>
división>
división>

Así es como debería verse esto en su navegador, de forma predeterminada, antes de aplicar cualquier estilo personalizado:

Si desea crear más tarjetas o incluir más contenido en una sola tarjeta, hágalo antes de continuar.

Estilo CSS para componentes de tarjeta

Usando CSS, puede diseñar individualmente cada tarjeta para hacerlas visualmente atractivas. Usa el selector universal reiniciar márgenes, rellenosy posición usando tamaño de caja. Luego diseñe el contenedor dándole relleno para crear algo de espacio.

​​​​​​* {
margen: 0;
relleno: 0;
tamaño de caja: cuadro de borde;
}
.tarjeta-contenedor {
relleno: 20píxeles;
}

A continuación, utilice un selector múltiple para todas las tarjetas, déle un margen para proporcionar espacio alrededor de cada tarjeta y configure el mostrar y dirección de flexión para el diseño. Además, establezca un borde para definir las tarjetas, un radio de borde para algunas curvas y un ancho máximo para la capacidad de respuesta.

.tarjeta-de-contenido,
.tarjeta-producto,
.tarjeta-perfil {
margen: 20píxeles;
mostrar: doblar;
dirección de flexión: columna;
borde: 2píxelessólido#ccc;
borde-radio: 7píxeles;
anchura máxima: 250píxeles;
}

Ahora enfóquese en cada tarjeta, comenzando con la tarjeta de contenido, y asígnele un color de fondo y relleno. Agregue selectores descendientes para los elementos en la tarjeta de contenido.

Dale estilo a la imagen con anchura máxima y borde-radio. Establezca el margen, la familia de fuentes y el tamaño de fuente para el archivo h3. Para la etiqueta de anclaje, elimine la decoración del texto y establezca el color, el margen superior y el tamaño de fuente.

.tarjeta-de-contenido {
fondo: #E9724C;
relleno: 10píxeles;
}
.tarjeta-de-contenidoimagen {
anchura máxima: 100%;
borde-radio: 5píxeles;
}
.tarjeta-de-contenidoh3 {
margen: 10píxeles 0;
Familia tipográfica: monoespaciado;
tamaño de fuente: 1.5rem;
}
.tarjeta-de-contenidoa {
decoración de texto: ninguno;
color: #6f2ed8;
margen:12 píxeles 0 7píxeles 0;
tamaño de fuente: 1movimiento rápido del ojo;
}

La tarjeta de producto requerirá más estilo debido a sus elementos adicionales. Cree selectores para cada elemento secundario y diseñelos en consecuencia.

El botón El elemento contiene la mayoría de los atributos de estilo para lograr el efecto de llamada a la acción. Alinee solo el botón a la derecha configurando el autoalineador en extremo flexible en el selector de anclaje.

.tarjeta-productoimagen {
borde-radio: 5píxeles 5píxeles 0 0;
ancho: 100%;
}
.tarjeta-productoh3 {
margen: 5píxeles 10píxeles;
Familia tipográfica: monoespaciado;
tamaño de fuente: 1.5rem;
}
.tarjeta-productopag {
margen: 5píxeles 10píxeles;
Familia tipográfica: Georgia, 'VecesNuevoromano', Veces, serif;
}
.tarjeta-productoa {
alinearse: extremo flexible;
}
.tarjeta-productobotón {
ancho: 100píxeles;
altura: 30píxeles;
margen: 10píxeles;
borde: 1píxelessólido#8f3642;
borde-radio: 4píxeles;
color de fondo: #FFC857;
peso de fuente: 700;
cursor: puntero;
}

Finalmente, aplique estilo a la tarjeta de perfil. Establezca el radio del borde en la parte superior derecha y superior izquierda de la imagen para que coincida con el contenedor. Ajuste el tamaño de la imagen y ajuste si es necesario. Utilice al menos dos tipos de fuente y colores complementarios en los textos para la definición. Además, puede hacer que el elemento procesable, es decir. la etiqueta de anclaje: destaque con un borde.

.tarjeta-perfilimagen {
borde-radio: 5píxeles 5píxeles 0 0;
altura: 200píxeles;
ajuste de objeto: cubrir;
}
.tarjeta-perfilh3 {
margen: 10píxeles;
Familia tipográfica: monoespaciado;
tamaño de fuente: 1.5rem;
}
.tarjeta-perfilpag:primero de tipo {
margen:0px 10píxeles;
Familia tipográfica: 'VecesNuevoromano', Veces, serif;
color: azul aciano;
}
.tarjeta-perfilpag:último-de-tipo {
margen: 5píxeles 10píxeles;
tamaño de fuente: 0.9 rem;
}
.tarjeta-perfila {
decoración de texto: ninguno;
margen: 5píxeles 10píxeles 10píxeles 10píxeles;
relleno: 5píxeles 15píxeles;
alinearse: centro;
borde: 1píxelessólidoazul aciano;
borde-radio: 15píxeles;
color: negro;
Familia tipográfica: monoespaciado;
peso de fuente: 500;
}

Después de diseñar, sus tarjetas deberían verse así:

Diseño y flexibilidad de la tarjeta

La capacidad de respuesta es vital para proporcionar una experiencia fluida con la interfaz en todos los dispositivos. Puede use CSS Flexbox o CSS Grid para el diseño. Finalmente, puedes utilizar consultas de medios para la capacidad de respuesta.

Usando CSS Flexbox

En primer lugar, agregue un atributo de visualización y configúrelo para que se flexione en su selector de contenedores de tarjetas. Aplique flex-wrap y configúrelo para envolver, de modo que las tarjetas puedan envolverse en un tamaño de pantalla pequeño.

Además, establezca el alinear elementos y justificar-contenido Propiedades a tu gusto.

​​​​​​.tarjeta-contenedor {
relleno: 20píxeles;
mostrar: doblar;
envoltura flexible: envoltura;
alinear elementos: centro;
justificar-contenido: uniformemente en el espacio;
}

La página debería verse así:

Eso concluye la capacidad de respuesta en tamaños de pantalla más grandes. Para una ventana gráfica más pequeña, como un teléfono móvil, puede usar una regla de consulta de medios y establecer el ancho máximo.

Dentro de la consulta de medios, determine qué elementos desea cambiar. En este caso, el contenedor de la tarjeta cambiará.

Selecciona el dirección de flexión a columna, por lo que las cartas se apilan verticalmente. Para mostrar las tarjetas en el centro de la pantalla, horizontalmente, establezca las propiedades de justificar contenido y alinear elementos en el centro:

@medios de comunicación pantalla y (anchura máxima:480px) {
.tarjeta-contenedor {
dirección de flexión: columna;
justificar-contenido: centro;
alinear elementos: centro;
 }
}

Para ver el efecto de consulta de medios, verifique el código en CódigoPen.

Usando la cuadrícula CSS

Primero, configure la visualización del contenedor de tarjetas en cuadrícula. Usar cuadrícula-plantilla-columnas para permitir que las tarjetas ajusten su ancho automáticamente. Usar una brecha de rejilla para el espacio entre las tarjetas. Usar justificar-elementos para centrar las cartas.

.tarjeta-contenedor {
relleno: 20píxeles;
mostrar: red;
cuadrícula-plantilla-columnas: repetir(ajuste automático, mínimo máximo(300píxeles, 1es));
brecha de rejilla: 20píxeles;
justificar-elementos: centro;
}

La página debería verse así:

Para pantallas móviles, aplique una consulta de medios. Dentro de la consulta, modifique el diseño de la cuadrícula para ventanas gráficas más pequeñas. Colocar cuadrícula-plantilla-columnas a 1fr para que cada carta ocupe todo el ancho. Además, el establecimiento justificar-elementos y alinear elementos propiedades al centro centrará las tarjetas tanto horizontal como verticalmente.

@medios de comunicación pantalla y (anchura máxima:480px) {
.tarjeta-contenedor {
cuadrícula-plantilla-columnas: 1es;
justificar-elementos: centro;
alinear elementos: centro;
 }
}

Por combinando CSS Grid y consultas de medios, las tarjetas se envolverán en pantallas más grandes y se apilarán verticalmente en pantallas más pequeñas, logrando un diseño de tarjeta receptivo. Para ver el efecto de consulta de medios, verifique el código en CódigoPen.

Consideraciones de accesibilidad para los componentes de la tarjeta

Es crucial asegurarse de que los componentes de la tarjeta que cree sean accesibles para todos los usuarios, incluidos aquellos con discapacidades. Estas son algunas consideraciones clave para hacer que los componentes de la tarjeta sean más accesibles:

• HTML semántico
• Navegación por teclado
• Estilos de enfoque
• Etiquetas y roles de ARIA
• texto alternativo
• Estructura de encabezado adecuada
• Contraste de color

Al implementar estas consideraciones de accesibilidad, los desarrolladores web pueden garantizar que los componentes de la tarjeta sean inclusivos.

Personalización y exploración adicional

Puede ir más allá con la personalización de su componente de tarjeta. Aquí hay algunas ideas que puede considerar:

• Transiciones y animaciones
• Estilos de imagen
• Esquemas de color y fondo
• Estilos de borde
• Elementos interactivos

Hay muchas maneras diferentes en las que puede personalizar los componentes de su tarjeta, así que siéntase libre de experimentar.

Cree componentes de tarjetas visualmente atractivos y receptivos

Los componentes de la tarjeta pueden desempeñar un papel en casi cualquier sitio web. Crear uno con HTML y CSS es fácil, pero también es importante saber cómo manejar la accesibilidad.

Hay otros efectos CSS que puede probar, como filtros CSS y modo de fusión para efectos visuales. Practique creando más con diferentes personalizaciones para el atractivo visual.