Crearemos esto de dos maneras diferentes para que comprenda bien las diversas propiedades de CSS. Puede usar este patrón de interfaz de usuario en diferentes partes de sus sitios, por ejemplo:

  • Para presentar a los miembros del equipo
  • Para mostrar publicaciones / productos destacados o más recientes
  • Para listar testimonios

Al igual que con cualquier característica nueva de CSS, es posible que vea inconsistencias según el navegador que use para verificar las demostraciones. Por ejemplo, Chrome mostrará nuestra barra de desplazamiento personalizada, mientras que Firefox seguirá mostrando la barra de desplazamiento predeterminada. Tenga esto en cuenta y asegúrese de consultar caniuse.com para conocer la compatibilidad del navegador con varias funciones de front-end.

Nuestra interfaz de usuario de la tarjeta de desplazamiento

Verifique la primera versión de nuestro componente terminado que usa flexbox para el diseño de la cuadrícula:

Y aquí está la segunda versión de nuestro componente terminado que usa CSS Grid para el diseño de la cuadrícula:

Intente desplazar cada una de manera que la mitad de una tarjeta sea visible en el borde: ¡vea cómo el comportamiento de desplazamiento coloca automáticamente las tarjetas en su posición!

1. Determinar el diseño

Comencemos discutiendo los requisitos del proyecto.

Necesitamos crear un diseño de tarjeta desplazable adaptable. La cantidad de tarjetas que aparecerán a la vista cambiará según el tamaño de la ventana gráfica.

Aquí hay una tabla útil donde registramos cómo debe comportarse nuestro diseño (cuadrícula) en diferentes pantallas:








Pantalla Tamaño de la ventana gráfica Columnas de cuadrícula Brecha de rejilla
X-pequeño <500 píxeles 1 10 píxeles
Pequeña ≥ 500px 2 20 píxeles
Medio ≥ 700px 3 30px
Largo ≥ 1100px 4 40px

Para visualizar cosas, oEn pantallas extra pequeñas, el diseño se verá así:

El diseño de la tarjeta en pantallas de hasta 499px El diseño de la tarjeta en pantallas de hasta 499px El diseño de la tarjeta en pantallas de hasta 499px

OEn pantallas pequeñas, se verá así:

El diseño de la tarjeta en pantallas entre 500px y 699px El diseño de la tarjeta en pantallas entre 500px y 699px El diseño de la tarjeta en pantallas entre 500px y 699px

OEn pantallas medianas, tendrá este aspecto:

El diseño de la tarjeta en pantallas entre 700px y 1099px El diseño de la tarjeta en pantallas entre 700px y 1099px El diseño de la tarjeta en pantallas entre 700px y 1099px

Finalmente, en pantallas grandes, se verá de la siguiente manera:

El diseño de la tarjeta en pantallas de más de 1099 px El diseño de la tarjeta en pantallas de más de 1099 px El diseño de la tarjeta en pantallas de más de 1099 px

También necesitamos bloquear (ajustar) las tarjetas visibles en su lugar, cada vez que un usuario haya terminado de desplazarse. De esta forma siempre tendremos a la vista un número exacto de cartas y evitaremos ver sólo una parte de otras cartas; la posición de desplazamiento cambiará inmediatamente al punto de inicio de la tarjeta más cercana. Este salto producirá un efecto en el que cada conjunto de cartas visibles se comportará un poco como diapositivas de carrusel.

Este efecto será aún más evidente en las pantallas de los dispositivos móviles, donde solo aparece una tarjeta y, a medida que deslizas, la tarjeta adyacente se desliza hacia adentro.

Para comprender mejor lo que estoy describiendo, considere el siguiente video, o mejor aún, consulte las demostraciones con varios tamaños de pantalla:


2. Definir el marcado HTML

Usaremos una estructura bastante sencilla para esto: un elemento contenedor con un encabezado y una lista de tarjetas dentro. Cada tarjeta contendrá un título, contenido y enlace. Envolveremos estos elementos alrededor de un poco más div s para asegurarse de que el botón de enlace siempre estará en la parte inferior de la tarjeta.

Aquí está el marcado:

3. Especificar los estilos principales

Para construir el diseño deseado y especialmente la cuadrícula, podemos usar diferentes técnicas de diseño. Comenzaremos con un enfoque de caja flexible y luego continuaremos con uno de CSS Grid.

Para simplificar, solo discutiremos las partes importantes de CSS.

Todas las tarjetas vivirán dentro de un contenedor que tendrá un ancho de 1400px.

Interfaz de usuario de la tarjeta Flexbox

Las cosas clave sobre la envoltura de la tarjeta:

  • Será un contenedor flexible.
  • Tendrá overflow-x: scroll ya que queremos desplazarnos horizontalmente para ver todas las tarjetas.
  • Necesitaremos una barra de desplazamiento personalizada que coincida con los colores de nuestra marca, suponiendo que el color principal de nuestra marca sea el rojo oscuro.

Las cosas clave de cada tarjeta:

  • Será un contenedor flexible con flex-direction ajustado a column . Esto significa que los elementos flexibles se apilarán verticalmente a lo largo del eje principal.
  • Como se dijo anteriormente, el botón de enlace siempre debe estar en la parte inferior, independientemente del título y la longitud del contenido de cada tarjeta. Entonces, para lograr esta uniformidad, le daremos un envoltorio de enlace principal margin-top: auto .
  • lo daremos flex-shrink: 0 como no queremos achicarnos y usar el flex-basis propiedad para establecer su ancho. los flex-grow propiedad no nos interesa, por lo que mantendremos la predeterminada 0 valor. El ancho dependerá del tamaño de la pantalla y del margen entre las tarjetas adyacentes. Vamos a explicar.

En pantallas extra pequeñas, todas las tarjetas tendrán un ancho igual al ancho principal.

Para calcular el ancho de la tarjeta en pantallas pequeñas, haremos estos cálculos:

El diseño de la tarjeta en pantallas pequeñas explicado El diseño de la tarjeta en pantallas pequeñas explicado El diseño de la tarjeta en pantallas pequeñas explicado

  • Espacio total entre tarjetas visibles = 1 * 20px => 20px. Omitimos el espacio de la última carta.
  • El ancho de cada tarjeta = calc (50% – 10px). El valor 10px se obtiene calculando: Espacio total entre tarjetas visibles / Número de tarjetas visibles (20px / 2 => 10px).

Para calcular el ancho de la tarjeta en pantallas medianas, haremos estos cálculos:

Explicación del diseño de la tarjeta en pantallas medianas Explicación del diseño de la tarjeta en pantallas medianas Explicación del diseño de la tarjeta en pantallas medianas

  • Espacio total entre tarjetas visibles = 2 * 30px => 60px. Omitimos el espacio de la última carta.
  • El ancho de cada tarjeta = calc (calc (100% / 3) – 20px). El valor 20px se obtiene calculando: Espacio total entre tarjetas visibles / Número de tarjetas visibles (60px / 3 => 20px).

propina

Necesitamos un diseño de tres columnas. Entonces, en lugar de escribir calc (33.333% – 20px), dejaremos que los navegadores decidan el porcentaje exacto agregando un cálculo anidado.

Para calcular el ancho de la tarjeta en pantallas grandes, haremos estos cálculos:

El diseño de la tarjeta en pantallas grandes explicado El diseño de la tarjeta en pantallas grandes explicado El diseño de la tarjeta en pantallas grandes explicado

  • Espacio total entre tarjetas visibles = 3 * 40px => 120px. Omitimos el espacio de la última carta.
  • El ancho de cada tarjeta = calc (25% – 30px). El valor 30px se obtiene calculando: Espacio total entre tarjetas visibles / Número de tarjetas visibles (120px / 4 => 30px).

Para bloquear la ventana gráfica en ciertos elementos una vez finalizado el desplazamiento, utilizaremos la función CSS Scroll Snap. Eso dijo:

  • El envoltorio de la tarjeta recibirá la scroll-snap-type: x mandatory El valor de la propiedad. Esto asegura que el navegador se ajustará a un punto de ajuste tan pronto como finalice el desplazamiento del usuario.
  • Cada tarjeta recibirá el scroll-snap-align: start El valor de la propiedad. Esto determina la parte de la tarjeta en la que debe detenerse el desplazamiento. Intenta darle otro valor como center para ver la diferencia.

Intente también desplazarse sin estas dos propiedades habilitadas para ver la diferencia.

Estos son los estilos más importantes:

Y la demostración de CodePen relacionada donde puede examinar todos los estilos:

Interfaz de usuario de la tarjeta de cuadrícula CSS

En este segundo enfoque, crearemos el mismo diseño de tarjeta, pero con CSS Grid.

El diseño de la cuadrícula CSS El diseño de la cuadrícula CSS El diseño de la cuadrícula CSS

Estas son las modificaciones que aplicaremos:

  • El envoltorio de la tarjeta será un contenedor de rejilla.
  • Colocaremos todos los elementos de la cuadrícula como columnas gracias a la grid-auto-flow: column El valor de la propiedad.
  • Usaremos el grid-auto-columns propiedad para establecer el tamaño de las columnas. El tamaño de la columna dependerá del tamaño de la pantalla y del espacio entre cada columna. Los cálculos son exactamente los mismos que hicimos anteriormente con el flex-basis propiedad. Entonces, los valores de la grid-auto-columns la propiedad coincidirá con los valores de los mencionados flex-basis propiedad en cualquier tamaño de pantalla.

información

Aplicamos la propiedad flex-base al elemento flexible, luego la propiedad grid-auto-columns (y, en general, todas las propiedades de CSS Grid) al contenedor de cuadrícula.

Aquí están los estilos modificados:

Y nuevamente, la demostración de CodePen relacionada donde puede examinar todos los estilos:

Conclusión

En este tutorial, examinamos dos formas de crear una interfaz de usuario de tarjeta de desplazamiento horizontal. En el camino, revisamos varias características modernas de CSS. Esto le habrá brindado nuevos conocimientos y, con suerte, lo habrá inspirado para crear diseños de interfaz de usuario que aprovechen algunas de las cosas que cubrimos aquí.

Si se te ocurre otra forma de construir este diseño, no olvides compártelo con nosotros! Como siempre, ¡muchas gracias por leer!

Tutoriales de Flexbox en Tuts +

Flexbox es una parte notoriamente complicada de CSS, pero no se preocupe, ¡lo tenemos cubierto!

Deja una respuesta