Construir una ilusión de cuadrícula torcida

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

En esta publicación, nos divertiremos un poco. Debe haber 100 maneras de lograr esta ilusión óptica, y solo compartiré contigo mis pensamientos, pero te animo a que pruebes tu estilo. Prueba la demo y consulta la fuente.

Si prefieres ver un video, aquí tienes una versión de esta publicación en YouTube:

Descripción general

El nombre de esta ilusión es la Ilusión de la pared de café. No hay líneas torcidas en ningún lugar, pero nuestros ojos perciben las inclinaciones. Puede ser difícil de creer, pero reconstruirla te ayudará a ver a través de la ilusión.

Marca

El código HTML para esto es de filas y columnas sencillas. <body> es el contenedor con <div class="row"> para 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í la cuadrícula de CSS porque parecía adecuada para el estilo de presentación de las filas y también incluye justify-content, que parecía una buena manera de compensar 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 las 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 al viewport completo.

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

Estilos de fila

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 pequeño padding intercalado a la fila para que los cuadros no se encuentren con el borde de la vista del puerto. Luego, segmenté ciertas filas y justifiqué el contenido a 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

Ahora solo queda 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? 🙂 ¿Flotantes? ¿Flexbox? ¿Gradiente?

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

Crea una demo, twittea los vínculos y los agregaré a la sección de remixes de la comunidad a continuación.

Remixes de la comunidad