Cuadrícula CSS y formas personalizadas Parte 3 | trucos CSS

Después de las partes 1 y 2, vuelvo con un tercer artículo para explorar más formas fantásticas. Al igual que los artículos anteriores, combinaremos CSS Grid con recorte y máscaras para crear fantásticos diseños para galerías de imágenes.

¿Necesito leer los artículos anteriores?

No es obligatorio, pero es muy recomendable que cubras tantos trucos como sea posible. También puede leerlos en cualquier orden, pero seguirlos en orden cronológico es una buena idea para ver cómo llegamos aquí.

Basta de hablar, vayamos directamente a nuestro primer ejemplo.

La galería de fotos troqueladas

Antes de profundizar en el CSS, echemos un vistazo al marcado:

<div class="gallery">
  <img src="https://css-tricks.com/css-grid-and-custom-shapes-part-3/..." alt="https://css-tricks.com/css-grid-and-custom-shapes-part-3/...">
  <img src="https://css-tricks.com/css-grid-and-custom-shapes-part-3/..." alt="https://css-tricks.com/css-grid-and-custom-shapes-part-3/...">
  <img src="https://css-tricks.com/css-grid-and-custom-shapes-part-3/..." alt="https://css-tricks.com/css-grid-and-custom-shapes-part-3/...">
  <img src="https://css-tricks.com/css-grid-and-custom-shapes-part-3/..." alt="https://css-tricks.com/css-grid-and-custom-shapes-part-3/...">
</div>

Nada más que unos pocos <img> etiquetas en un contenedor div, ¿verdad? Recuerde, el principal desafío de esta serie es trabajar con la menor cantidad de HTML posible. Todos los ejemplos que hemos visto en esta serie usan exactamente el mismo marcado HTML. Sin divs adicionales, envoltorios y demás. Todo lo que necesitamos son imágenes contenidas en un elemento de envoltorio.

Ahora revisemos el CSS:

.gallery {
  --g: 6px; /* the gap */

  display: grid;
  width: 450px; /* the size */
  aspect-ratio: 1; /* equal height */
  grid: auto-flow 1fr / repeat(3, 1fr);
  gap: var(--g);
}
.gallery img:nth-child(2) {
  grid-area: 1 / 2 / span 2 / span 2;
}
.gallery img:nth-child(3) {
  grid-area: 2 / 1 / span 2 / span 2;
}

Es básicamente una cuadrícula cuadrada con tres columnas iguales. A partir de ahí, todo lo que sucede es que la segunda y la tercera imagen se colocan explícitamente en la cuadrícula, lo que permite que la primera y la última imagen se coloquen automáticamente a su alrededor.

Este comportamiento automático es una poderosa característica de CSS Grid llamada "diseño automático". Lo mismo ocurre con la cantidad de filas: ninguna de ellas está definida explícitamente. El navegador las crea "implícitamente" en función de la ubicación de los elementos. Tengo un artículo muy detallado que explora ambos conceptos.

Tal vez te preguntes qué les sucede grid y grid-area valores de propiedad. ¡Se ven extravagantes y es difícil equivocarse! Esto es porque elegí CSS grid propiedad abreviada que es súper útil pero toma una cantidad obscena de valores de sus propiedades constituyentes. Puedes verlos todos en el Almanaque.

Pero lo que realmente necesitas saber es esto:

grid: auto-flow 1fr / repeat(3, 1fr);

... es equivalente a:

grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 1fr;

Igual por grid-area Si abrimos DevTools y comprobamos nuestra declaración: grid-area: 1/2/span 2/span 2; obtendrá lo siguiente:

grid-area: 1 / 2 / span 2 / span 2;

... eso es lo mismo que escribir todo esto:

grid-row-start: 1; /* 1st row */
grid-column-start: 2; /* 2nd column */
grid-row-end: span 2; /* take 2 rows */
grid-column-end: span 2; /* take 2 columns */

Mismo trato para el otro grid-area Cuando ponemos todo junto, esto es lo que obtenemos:

Sí, la segunda y la tercera imagen se superponen en el medio. ¡Esto no es un error! Los coloqué a propósito uno encima del otro para poder aplicar clip-path para cortar parte de cada uno y obtener el resultado final:

Cómo hacemos esto? Podemos recortar la esquina inferior izquierda de la segunda imagen (img:nth-child(2)) con CSS clip-path Propiedad:

clip-path: polygon(0 0, 100% 0, 100% 100%, calc(50% + var(--g) / 4) 100%, 0 calc(50% - var(--g) / 4))

Y la esquina superior derecha de la tercera:

clip-path: polygon(0 0, calc(50% - var(--g) / 4) 0, 100% calc(50% + var(--g) / 4), 100% 100%, 0 100%);

Sé que sé. Eso es un montón de números y todo eso. Tengo un artículo que describe la técnica en detalle.

Eso es todo, ¡tenemos la primera grilla de imágenes! Agregué escala de grises filter en <img> selector para conseguir ese pequeño efecto de fijación.

Exposición de imagen dividida

Probemos algo diferente. Podemos tomar lo que aprendimos sobre recortar la esquina de una imagen y combinarlo con un bonito efecto para revelar toda la imagen en espera.

La configuración de cuadrícula para este es menos intensiva que la anterior, ya que todo lo que necesitamos son dos imágenes superpuestas:

.gallery {
  display: grid;
}
.gallery > img {
  grid-area: 1 / 1;
  width: 350px; /* the size */
  aspect-ratio: 1; /* equal height */
}

Dos imágenes del mismo tamaño se apilan una encima de la otra (gracias a grid-area: 1 / 1).

El efecto de retención se basa en la animación. clip-pathAnalizaremos el código de la primera imagen para ver cómo funciona, luego incluiremos lo mismo en la segunda imagen con valores actualizados. Sin embargo, observe que tenemos tres estados diferentes:

1. Cuando no hay imágenes, se revela la mitad de cada imagen.
2. Cuando pasamos el cursor sobre la primera imagen, se revela de forma más completa, pero conserva un pequeño recorte en la esquina.
3. Cuando pasamos el cursor sobre la segunda imagen, solo se ve un pequeño triángulo en la primera.

En cualquier caso, tenemos una forma triangular, lo que significa que necesitamos un polígono con tres puntos para clip-path valor.

¿Qué? El segundo estado no es un triángulo, sino un cuadrado con una esquina recortada.

Tienes razón, pero si miramos de cerca, podemos ver un triángulo "oculto". Agreguemos un box-shadow a las imágenes

¡Ajá! ¿Te diste cuenta?

¿Qué tipo de magia es esta? Un hecho poco conocido es que clip-path toma valores fuera 0%-100% rango que nos permite crear formas de "mezcla" (Sí, me lo acabo de inventar. De nada.) De esta manera, solo tenemos que trabajar con tres puntos en lugar de los cinco necesarios para hacer la misma forma a partir de las partes visibles. optimizado CSS para la victoria!

Este es el código después de que incluimos los valores del polígono en el clip-path Propiedad:

.gallery > img:first-child {
  clip-path: polygon(0 0, calc(100% + var(--_p)) 0 , 0 calc(100% + var(--_p)))
}
.gallery > img:last-child {
  clip-path: polygon(100% 100%, 100% calc(0% - var(--_p)), calc(0% - var(--_p)) 100%)
}

Aviso --_p variable. Estoy usando esto para optimizar un poco el código mientras agregamos la transición en espera. En lugar de actualizar todo clip-path solo actualizamos esta variable para obtener el movimiento. Aquí hay un video para ver cómo deben moverse los puntos entre cada estado:

Podemos dar una bofetada a transition en <img> selector luego actualizar --_p variable de estados para obtener el efecto final:

.gallery {
  --g: 8px; /* the gap */
}
.gallery > img {
  /* etc. */
  --_p: calc(-1 * var(--g));
  transition: .4s .1s;
}
.gallery:hover > img:last-child,
.gallery:hover > img:first-child:hover{
  --_p: calc(50% - var(--g));
}
.gallery:hover > img:first-child,
.gallery:hover > img:first-child:hover + img {
  --_p: calc(-50% - var(--g));
}

Si no consideramos la brecha (definida como --g en el código) entre las imágenes, luego los tres valores de --_p son 0%, 50%y -50%Cada uno de ellos define uno de los estados que explicamos anteriormente.

Revelando la imagen del pastel

Aumentemos el nivel de dificultad del último e intentemos hacer el mismo truco pero con cuatro imágenes en lugar de dos.

Genial, ¿verdad? Cada imagen es un cuarto de círculo y al pasar el mouse tenemos una animación que transforma una imagen en un círculo completo que cubre el resto de las imágenes. El efecto puede parecer imposible porque no hay forma de rotar puntos y transformarlos para llenar el círculo. En realidad, sin embargo, no estamos girando ningún punto en absoluto. ¡Esto es una ilusión!

Para este ejemplo, solo me centraré en clip-path animación porque la configuración de la cuadrícula es la misma que en el ejemplo anterior: cuatro imágenes del mismo tamaño apiladas una encima de la otra.

Y un video que vale la aburrida y larga explicación:

los clip-path está formado por siete puntos, tres de ellos están en una posición fija y el resto se mueven como se muestra en el video. El efecto se ve menos genial cuando se ejecuta lentamente, pero podemos ver cómo clip-path convertir entre formas.

El efecto es ligeramente mejor si añadimos border-radius y lo hacemos más rápido:

Y al hacerlo aún más rápido, como en el ejemplo original, obtenemos la ilusión perfecta de un cuarto de círculo que se convierte en un círculo completo. Aquí está el valor del polígono para el nuestro. clip-path en la primera imagen de la serie:

.gallery > img:nth-child(1) {
  clip-path: polygon(50% 50%, calc(50% * var(--_i, 0)) calc(120% * var(--_i, 0)), 0 calc(100% * var(--_i, 0)),0 0, 100% 0, 100% calc(100% * var(--_i, 0)), calc(100% - 50% * var(--_i, 0)) calc(120% * var(--_i, 0)));
}
.gallery > img:hover {
 --_i: 1;
}

Como de costumbre, uso una variable para optimizar el código. La variable alternará entre 0 y 1 para actualizar el polígono.

Lo mismo ocurre con las otras imágenes, pero con una diferencia. clip-path Sé que los valores pueden parecer difíciles de descifrar, pero siempre puedes usar herramientas en línea como clips para visualizar los valores.

El mosaico de imágenes

Conoces los mosaicos, ¿verdad? Es un estilo de arte que crea diseños decorativos a partir de piezas individuales más pequeñas, como piedras de colores. Pero también puede ser una imagen compuesta formada por otras imágenes más pequeñas.

Y lo adivinaste: ¡podemos hacer tales cosas en CSS!

Primero, imaginemos cómo serían las cosas si clip-path fueron sacados de la mezcla y todo lo que teníamos eran cinco imágenes superpuestas:

Estoy haciendo un poco de trampa en este video porque estoy revisando el código para identificar el área de cada imagen, pero eso es lo que tienes que hacer en tu cabeza. Para cada imagen trata de completar la parte que falta para ver el rectángulo completo y con esto podemos identificar la posición y el tamaño de cada uno.

Necesitamos encontrar cuántas columnas y filas necesitamos para la cuadrícula:

1. Tenemos dos imágenes grandes colocadas una al lado de la otra, cada una llenando la mitad del ancho de la cuadrícula y la altura total de la cuadrícula. Esto significa que probablemente serán necesarios Dos columnas (uno para ambas imágenes) y una línea (para toda la altura de la rejilla).
2. Tenemos la imagen en el medio que se superpone a las otras dos imágenes. Eso significa que realmente lo necesitamos. cuatro columnas en lugar de dos, aunque todavía solo necesitamos una línea.
3. Cada una de las dos últimas imágenes llena la mitad de la cuadrícula, al igual que las dos primeras imágenes. Pero son solo la mitad de la altura de la cuadrícula. Podemos usar las columnas existentes que ya tenemos, pero las necesitaremos dos lineas en lugar de uno para dar cuenta de que estas imágenes tienen la mitad de la altura de la cuadrícula.

No quiero que pienses que la forma en que lo corto es solamente manera de hacerlo Así es como yo lo entendí. ¡Estoy seguro de que hay otras configuraciones posibles para obtener el mismo diseño!

Tomemos esta información y definamos nuestra malla, luego coloquemos las imágenes en ella:

.gallery {
  display: grid;
  grid: repeat(2, 1fr) / repeat(4, 1fr); 
  aspect-ratio: 2;
}
.gallery img:nth-child(1) {
  grid-area: 1 / 1 / span 2 / span 2;
}
.gallery img:nth-child(2) {
  grid-area: 1 / 2 / span 2 / span 2;
}
.gallery img:nth-child(3) {
  grid-area: span 2 / span 2 / -1 / -1;
}
.gallery img:nth-child(4) {
  grid-area: 2 / 1 / span 1 / span 2;
}
.gallery img:nth-child(5) {
  grid-area: span 1 / span 2 / -1 / -1;
}

Creo que ya entiendes lo que está pasando aquí después de ver algunos ejemplos que usan el mismo enfoque. Definimos una cuadrícula y colocamos imágenes explícitamente en ella usando grid-area para que las imágenes se superpongan.

Bueno pero aspect-ratio esta vez es diferente.

¡Así es! Si vuelves al razonamiento que hicimos, tenemos las dos primeras imágenes que son cuadradas una al lado de la otra y tienen el mismo tamaño. Esto significa que el ancho de la cuadrícula debe ser igual al doble su altura Por lo tanto, aspect-ratio: 2.

Ahora es el momento de clip-path valores Tenemos cuatro triángulos y un rombo.

Nuevamente, uso Clippy para todas estas cosas matemáticas. Pero para ser honesto, puedo escribir formas muy simples a mano después de pasar varios años trabajando de cerca con clip-path¡y sé que tú también puedes con la práctica!

El complejo mosaico de imágenes

Aumentemos la dificultad y probemos otro rompecabezas, esta vez con menos simetría y formas más complejas.

¡No te preocupes, verás que es el mismo concepto que el que acabamos de hacer! Nuevamente, imaginemos que cada imagen es un rectángulo, luego definamos la malla según lo que vemos.

Comenzaremos con dos imágenes:

Ambos son cuadrados. La primera imagen es la mitad del tamaño de la segunda imagen. La primera imagen ocupa menos de la mitad del ancho de la cuadrícula, mientras que la segunda imagen ocupa más de la mitad, dándonos un total Dos columnas de diferente tamaño (el primero es igual a la mitad del segundo). La primera imagen tiene la mitad de la altura, así que asumamos automáticamente que la necesitamos dos lineas también.

Agreguemos otra imagen al diseño.

¡Esto hace las cosas un poco más complicadas! Necesitamos dibujar algunas líneas para determinar cómo actualizar la configuración de la red.

Pasaremos de una cuadrícula de 2×2 a cuatro columnas y tres lineasBastante asimétrico, ¿no? Antes de intentar calcular este tamaño completo, veamos si el mismo diseño se mantiene cuando agregamos las otras imágenes.

Parece que todavía necesitamos más filas y columnas para que todo encaje en su lugar. Con base en las líneas de esta imagen, tendremos un común cinco columnas y cuatro lineas.

La lógica es simple, aunque el diseño es complejo, ¿verdad? Agregamos las imágenes una por una para encontrar la configuración adecuada que se adapte a todo. Ahora necesitamos identificar el tamaño de cada columna y fila.

Si decimos que la fila/columna más pequeña es igual a una parte de la cuadrícula (1fr) obtendremos:

grid-template-columns: 1fr 1fr 2fr 3fr 5fr;

...para las columnas y:

grid-template-rows: 3fr 1fr 2fr 2fr;

...para las filas Podemos consolidar esto usando el grid propiedad abreviada de nuevo:

grid: 3fr 1fr 2fr 2fr / 1fr 1fr 2fr 3fr 5fr;

¡Ya sabes que hacer! Coloque las imágenes en la cuadrícula y aplique un clip-path a ellos:

.gallery img:nth-child(1) {
  grid-area: 1 / 1 /span 2 / span 3;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.gallery img:nth-child(2) {
  grid-area: 1/2/span 3/span 3;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.gallery img:nth-child(3) {
  grid-area: 1 / span 2 / -1 / -1;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.gallery img:nth-child(4) {
  grid-area: span 3 / 1 / -1 / span 3;
  clip-path: polygon(25% 0, 100% 60%, 50% 100%, 0 100%, 0 20%);
}
.gallery img:nth-child(5) {
  grid-area: span 3/span 3/-1/-1;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

Podemos detenernos aquí y nuestro código está bien, pero haremos un poco más para optimizar clip-path valores. Dado que no tenemos espacios entre nuestras imágenes, podemos usar el hecho de que nuestras imágenes se superponen para reducir las cosas. Aquí hay un video para ilustrar el punto:

Como puede ver, la imagen en el medio (la que tiene la cámara) no necesita un clip-path., porque las otras imágenes se superponen, ¡dándonos la forma sin ningún trabajo adicional! Y observe que podemos usar los mismos tres puntos iridiscentes clip-path un concepto que usamos anteriormente en la imagen inferior izquierda para mantener el código más pequeño allí también.

Terminamos con una cuadrícula de imágenes de apariencia compleja con solo cuatro clip-path declaraciones — ¡son todos polígonos con tres puntos!

resumiendo

Guau, ¿verdad? No sé ustedes, pero nunca me aburro de ver lo que CSS puede hacer en estos días. No fue hace mucho tiempo que todo esto habría requerido una piratería detallada y un poco de JavaScript.

A lo largo de esta serie, hemos explorado muchos, muchos tipos diferentes de cuadrículas de imágenes, desde las básicas hasta los mosaicos complejos que creamos hoy. Y obtuvimos mucha experiencia práctica trabajando con recortes de CSS, ¡algo que definitivamente podrá usar en otros proyectos!

Pero antes de terminar con eso, tengo una pequeña tarea para ti...

Aquí hay dos mosaicos que quiero que hagas usando lo que hemos cubierto aquí. Uno está en el lado "más fácil" y el otro es un poco difícil. Sería genial ver tu trabajo en los comentarios, ¡así que únelos! ¡Tengo curiosidad por ver si su enfoque es diferente de cómo lo haría yo!