Aplicando formato a la card

Clase 17 de 29 • Curso de Tailwind CSS 1

Resumen

¿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!

Wandy Rafael Santana Evangelista

student•

Cuanto me ha encantado maquetar esto, y con TailwindCSS ha sido muy facil.

Jimmy Buriticá Londoño

student•

Te quedo muy bien.

Juan Otavalo

student•

Para ser sincero no le tenia fe a tailwind hasta que vi que se puede hacer este cardview sin mucho código.

Kevin Parra Lopez

student•

![](

Abner Batz

student•

Una practica que @Victor Yoalli Dominguez ha aprendido como diseñador es que; el negro es muy fuerte para la vista, cuando se está leyendo. &starf;&starf;&starf;&starf;&starf;

Enrique Gamboa

student•

De hecho, si analizas el diseño de interfaz de las mejores marcas notarás que nunca usan blancos ni negros absolutos. Es más, suelen usar grises oscuros combinados con algún otro color para darles una tonalidad sutil y agradable a la vista.

Angélica Rocha

student•

no sabía lo de &star; Gracias profe :)

Ruben Garcia

student•

Quise crear un sitio para vacaciones

Jefferson Andres Espejo Goez

student•

Me encantó :D

Santiago Escalante

student•

Cómo hiciste la captura del código?

Alex Camacho

teacher•

@sanntu puede que sea algo tarde pero puedes capturar código con polacode, es una extensión de vscode muy buena.

Luis Glex

student•

Modifiqué un poco el diseño de Víctor y quedó así, soy UI y en verdad es muy sencillo usar tailwind

Stiven Jiménez

student•

No se por que maquetar esta web de hamburguesas me da hambre todo el tiempo.

Miguel Angel Reyes Moreno

student•

Mera psicología humana

Carlos Roberto Villatoro Barrios

student•

Me puse a practicar un rato con las fuentes y con las dimensiones y me gusto el resultado y la facilidad con que se manejan con TailwindCSS:

Anderson Castellon

student•

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

student•

Interesante!

Matías Véliz Bravo

student•

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

Karen Michel Sixto Lázaro

student•

Excelente todo lo que ha compartido de diseño... <3 ![](

Nathaly Stefani Riaño Bejarano

student•

Me gusta que comparta los conocimientos que ha aprendido del diseño! :green_heart:

&lt;body class=&quot;min-h-screen bg-gray-400 m-4&quot;&gt;
  &lt;div&gt;
    &lt;div&gt;
      &lt;img
        class=&quot;rounded-lg&quot;
        src=&quot;https://images.unsplash.com/photo-1568901346375-23c9450c58cd?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;h=500&amp;q=80&quot;
        alt=&quot;Hamburger&quot;
      /&gt;
    &lt;/div&gt;
    &lt;div class=&quot;bg-white rounded-lg shadow-lg relative -mt-2 mx-2 p-2&quot;&gt;
      &lt;h2 class=&quot;text-xl tracking-tight uppercase font-semibold text-gray-900&quot;&gt;
        Hamburguesa con Queso
      &lt;/h2&gt;
      &lt;p class=&quot;text-gray-700 leading-snug&quot;&gt;Hamburguesa con queso y aderezo de chipotle&lt;/p&gt;
      &lt;div class=&quot;my-2 text-sm font-semibold text-gray-700&quot;&gt;MXN $15&lt;/div&gt;
      &lt;div class=&quot;text-yellow-600&quot;&gt;&amp;starf;&amp;starf;&amp;starf;&amp;starf;&amp;star; / 36 reseñas&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/body&gt;

Christian Velázquez

student•

Gracias por compartir.

Guillermo Baldán López

student•

Se agradece este pedazo de código

Josafat Morales Toledo

student•

alguien sabe por que se me sale el div con el texto a menos que le ponga un w-1/2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Card/Producto</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body class="min-h-screen bg-gray-400 mx-4 mb-8">
    <div class="mt-4 w-1/2">
        <div>
            <img class="rounded-lg" src="https://images.unsplash.com/photo-1568901346375-23c9450c58cd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&h=500&q=80"
                 alt="Hamburger">
        </div>
        <div class="relative mx-2 p-2 shadow-lg bg-white rounded-lg -mt-2">
            <h2 class="text-xl tracking-tight font-semibold uppercase text-gray-900">Hamburguesa champiñona </h3>
            <p class="text-gray-700 leading-snug">Hamburguesa con champiñones queso rajas piña y chistorra</p>
            <div class="mt-2 text-sm font-semibold text-gray-700">MXN $30</div>
            <div class="mt-2 text-sm text-yellow-700">&starf;&starf;&starf;&starf;&starf; 38 Reseñas</div>
        </div>

    </div>
</body>
</html>

Josafat Morales Toledo

student•

me auto contesto por si a alguien le sirve segun la documentacion de safari debemos agregar name="viewport" content="initial-scale=1.0" en el meta con eso y con la siguiente clases se compuso, en el modo diseño del navegador aun se ve mal pero en el telefono en fisico va perfecto.

Israel José Huallpara Mencias

student•

El uso de esta herramienta facilita mucho el diseño personalizado que se quiere lograr realizar para una página, este es el resultado de esta tarea.

Y el enlace al repositorio https://github.com/Berby001/platzi-food/commit/2770859b13fc1f7a5e8b0e2911410197c47e65ce Saludos...

Jose Guadalupe Luquin Angel

student•

Moises Hernandez

student•

Como dato curioso que les puede ayudar, si están corriendo un servidor de prueba para ver su pagina, pueden verla en su móvil si están en la misma red. Buscan su ip de su equipo donde están programando y en su celular escriben esa ip dos puntos y el puerto que esta corriendo su live server o servidor por defecto es 8080, puede varias si esta ocupado.

Aranxa Martinez

student•

Wow! no sabia eso, siempre esperaba al deploy para poder ver mis proyectos en el móvil. Muchas gracias!

Luis Alejandro Vera Hernandez

student•

 <div class="relative shadow-lg mx-2 p-2 bg-white rounded-lg -mt-2"> <!-- relative para colocarlo encima, shadow para aplicar efecto de sombra p de padding, mx-2 para que haya una separacion con los bordes  -->
            <h2 class="flex justify-center text-xl tracking-tight uppercase font-semibold text-gray-900">Hamburger Cheese</h3>
            <p class="text-gray-700 leading-snug"> Hamburguesa de queso con champiñones y carne</p> <!-- con leading snug se lo junta un poquito con el titulo  -->
            <div class="mt-2 text-sm font-semibold text-gray-700"> $2.50 USD </div>

            <!-- agregar estrellas -->
            <div class=" mt-2 text-xs text-yellow-700"> &starf; &starf; &starf; &starf; &star; / 36 reseñas </div>
        </div>

Guillermo Camacho

student•

Excelente curso, tuve algunas dificultades en la instalación pero vale la pena definitivamente!

Sergio Andrés Martínez Ramírez

student•

Qué fácil ha sigo maquetar con Tailwind, sin duda es una herramienta poderosa

Gonzalo Pimentel

student•

No se que tiene pero me encantó maquetar este simple card!