Aplicando formato a la card

Contenido del curso

Introducción, instalación y ambiente de desarrollo

Conceptos básicos

Utilerías

Proyecto: PlatziFood

Conclusiones

29
Conclusiones y qué sigue
00:54 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:009:06

Aplicando formato a la card

Curso de Tailwind CSS 1

Clase 17 de 29

Clase 17 / 29

Recursos

¿Cómo mejorar el diseño de una tarjeta para dispositivos móviles?

Optimizar el diseño de una tarjeta para dispositivos móviles requiere atención a los detalles y un enfoque en cómo los elementos interactúan entre sí. La usabilidad y la estética son fundamentales para captar y retener la atención del usuario. Vamos a profundizar en las técnicas para crear un diseño de tarjeta atractivo y funcional.

¿Cuál es el diseño básico de la tarjeta?

Para iniciar el desarrollo de nuestra tarjeta, es importante entender cómo se conforma a partir de sus elementos básicos. La estructura básica de una tarjeta incluye:

Imagen del producto.
Título del producto.
Descripción del producto.
Precio.
Reseñas y calificaciones.

¿Cómo añadir espacio y curvatura a los bordes de la tarjeta?

El espacio y la curvatura en los bordes contribuyen significativamente a una estética más moderna y atractiva.

Espacio adicional: Para facilitar el desarrollo, añadimos un margen inferior (margin-bottom) al contenedor padre. Esto nos permite tener el espacio suficiente para trabajar con el diseño.
Curvatura en las esquinas: Utilizar la clase rounded-lg para añadir un efecto de bordes redondeados a la imagen de la tarjeta.

.img-rounded {
    border-radius: var(--rounded-lg);
}

¿Cómo estructurar el contenido dentro de la tarjeta?

Una estructura clara es crucial para que los usuarios puedan capturar información rápidamente:

Dividir imagen del contenido: Emplear un contenedor div para separar la imagen del contenido (título, descripción, precio), facilitando así el ajuste de márgenes y espaciados.
Posicionamiento: Se puede usar posicionamiento relativo para disponer el contenido encima de la imagen, proporcionándole un efecto flotante al cuadro de contenido.

.content {
    position: relative;
    top: -10px; /* Ajusta según sea necesario */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

¿Cómo mejorar la legibilidad del contenido?

Ajustes en la tipografía y el color de los textos pueden mejorar dramáticamente la legibilidad y la jerarquía visual.

Tamaño del texto: Cambiar el tamaño de las fuentes para que sean más atractivas y fáciles de leer. Por ejemplo, un tamaño text-2xl para el título y text-gray-900 para un texto que debe ser menos prominente.
Color y peso de la tipografía: Utilizar variaciones de gris para los textos menos importantes y mantener el negro solo para títulos o encabezados importantes.

.title {
    font-size: var(--text-2xl);
    color: var(--text-gray-900);
    font-weight: var(--font-semibold);
}

¿Cómo manejar las reseñas y calificaciones?

Las reseñas y calificaciones son esenciales para destacar elementos clave como la aceptación o popularidad de un producto.

Utilización de íconos de estrellas: Emplear entidades como estrellas para representar visualmente las calificaciones.
Ajuste de escala: Aunque las reseñas son importantes, no deben distraer de los elementos principales. Usar un tamaño text-xs ayuda a mantener la armonía visual.

<div class="reviews text-xs">
    ★★★★☆ 36 reseñas
</div>

Con estos pasos y ajustes, podrá lograr una tarjeta no solo funcional sino visualmente atractiva que mejorará la experiencia del usuario en dispositivos móviles. Continúa explorando y experimentando para descubrir qué funciona mejor para tu diseño. ¡Adelante, sigue creando!

Anderson Castellon

Hace 6 años

Resultado realizado en Angular

<article class="product-card">

  <img class="product-card__image" [src]="image" alt="Card image">

  <div class="product-card__content">
    <h2 class="product-card__title">{{ title }}</h3>
    <p class="product-card__description">{{ description }}</p>
    <p class="product-card__price">{{ price }} USD$</p>
    <span class="product_card__rate">&#x2605;&#x2605;&#x2605;&#x2606;&#x2606;</span>
    <span class="product-card__reviews">{{ reviews }} reseñas</span>
  </div>

</article>

.product-card {
  @apply max-w-xs;
  @apply mx-auto;
  @apply mt-4;
  @apply flex;
  @apply flex-col;
  @apply items-center;
}

.product-card__image {
  @apply rounded-2xl;
  @apply shadow-xl;
}

.product-card__content {
  @apply bg-white;
  @apply rounded-lg;
  @apply shadow-2xl;
  @apply p-2;
  @apply inline-block;
  @apply -mt-4;
  @apply mx-3;
}

.product-card__title {
  @apply text-2xl;
  @apply font-semibold;
  @apply text-gray-700;
  @apply tracking-tight;
}

.product-card__description {
  @apply text-sm;
  @apply text-gray-500;
  @apply leading-snug;
  @apply my-2;
}

.product-card__price {
  @apply text-base;
  @apply text-gray-600;
  @apply font-bold;
  @apply uppercase;
}

.product_card__rate {
  @apply text-lg;
  @apply tracking-tight;
  @apply text-yellow-400;
}

.product-card__reviews {
  @apply text-xs;
  @apply text-gray-500;
  @apply ml-1;
}```


![sushi.png](https://static.platzi.com/media/user_upload/sushi-a20c94d4-c5df-40f1-9653-411bbe557a7b.jpg)

Russel Quiam

Hace 6 años

Interesante!

Matías Véliz Bravo

Hace 5 años

No es necesario utilizar @apply en multiples líneas, y más importante aún. Realizar clases personalizadas de CSS, va en contra de la filosofía de Tailwind. Recomiendo utilizar componentes y leer esta parte de la documentación oficial.

https://tailwindcss.com/docs/reusing-styles

Comentarios (40)40 comentarios

Wandy Rafael Santana Evangelista

Jimmy Buriticá Londoño

Juan Otavalo

Kevin Parra Lopez

Abner Batz

Hace 7 años

Enrique Gamboa

Angélica Rocha

Ruben Garcia

Jefferson Andres Espejo Goez

Santiago Escalante

Alex Camacho

Profesor

Luis Glex

Stiven Jiménez

Miguel Angel Reyes Moreno

Carlos Roberto Villatoro Barrios

Karen Michel Sixto Lázaro

Nathaly Stefani Riaño Bejarano

Christian Velázquez

Guillermo Baldán López

Josafat Morales Toledo

Israel José Huallpara Mencias

Hace 4 años

Jose Guadalupe Luquin Angel

Moises Hernandez

Aranxa Martinez

Luis Alejandro Vera Hernandez

Guillermo Camacho

Sergio Andrés Martínez Ramírez

Gonzalo Pimentel

Introducción, instalación y ambiente de desarrollo

¿Qué es Tailwind CSS?

Instalación y ambiente de desarrollo

Directivas de Tailwind

Conceptos básicos

Personalización y configuración

Responsive Design, Mobile First y Utility First

Utilerías

Colores

Cómo crear grids o columnas en Tailwind CSS

Dimensiones y Espacios

Cambiando las propiedades de la tipografía

Ajustando el espaciado entre letras y líneas

Display

Flexbox

Crea tus propias utilerías

Entendiendo las variantes y las pseudo-clases

¡Es hora de practicar!

Proyecto: PlatziFood

Creando una card

Aplicando formato a la card

Responsive design en la card

Construye el header

Crea el footer

Crea un banner

Cómo integrar una card

Forms

Directivas de Apply

Extraer componentes

Navbar

Alpine JS

Optimiza tu archivo: PurgeCSS y NanoCSS

Conclusiones

Conclusiones y qué sigue

Aplicando formato a la card