Construir una ilusión de cuadrícula torcida

Una exploración divertida de las formas de recrear una ilusión óptica con CSS.

Adam Argyle

En esta publicación, nos vamos a divertir un poco. Debe haber 100 formas de lograr esta ilusión óptica, y solo compartiré contigo mis ideas, pero te animo a que pruebes tu propio estilo. Prueba la demostración y consulta el código fuente.

Si prefieres un video, aquí tienes una versión de este artículo en YouTube:

Descripción general

El nombre de esta ilusión es Ilusión de la pared del café. No hay líneas torcidas en ninguna parte, pero nuestros ojos perciben inclinaciones. Puede ser difícil de creer, pero reconstruirlo definitivamente te ayudará a ver a través de la ilusión.

Marca

El código HTML para esto son filas y columnas sencillas. El <body> es el contenedor con <div class="row"> para los elementos secundarios. Cada fila contiene cinco elementos <div class="square">.

<div class="row">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>
…

Estilos

Elegí CSS grid porque me pareció adecuado para el estilo de presentación de filas, y también incluye justify-content, que me pareció una buena forma de desplazar los elementos secundarios de las filas.

Tipos de carrocería

Comenzando con los estilos del cuerpo, usé display: grid y grid-auto-rows para proporcionar los diseños de filas. El calc() que ves para los tamaños de fila tiene en cuenta el borde de cada fila y ayuda a que el efecto se ajuste a todo el viewport.

body {
  display: grid;
  grid-auto-rows: calc(20vh - 4px);
  gap: 4px;
  background: gray;
  margin: 0;
}

Estilos de filas

Aquí volví a elegir la cuadrícula, pero, en lugar de crear filas con ella, usé grid-auto-flow: column para cambiar la dirección a columnas. Luego, defino los tamaños de las columnas y agrego un poco de padding intercalado a la fila para que las casillas no se topen con el borde de la ventana gráfica. Luego, me enfoco en ciertas filas y justifico el contenido hacia center o end, lo que crea ese desplazamiento que alimenta la ilusión.

.row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 9vw;
  padding-inline: 4vw;
  gap: 10vw;
  background: white;
}

.row:nth-child(even) {
  justify-content: center;
}

.row:nth-child(3n) {
  justify-content: end;
}

Estilos cuadrados

Todo lo que queda ahora es cambiar el color de los cuadrados y agregar un borde:

.square {
  border-inline: 4px solid gray;
  background: black;
}

Conclusión

Ahora que sabes cómo lo hice, ¿cómo lo harías tú? 🙂 ¿Flota? ¿Flexbox? ¿Un gradiente?

Diversifiquemos nuestros enfoques y aprendamos todas las formas de crear contenido en la Web.

Crea una demostración, envíame por Twitter los vínculos y la agregaré a la sección de remixes de la comunidad que se encuentra a continuación.

Remixes de la comunidad