Construir una ilusión de cuadrícula torcida

Una divertida exploración 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 maneras de lograr esta ilusión óptica, y solo te compartiré mis pensamientos, pero te alentaré a que pruebes tu estilo. Prueba la demostración y mira la fuente.

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

Descripción general

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

Marca

El código HTML para esto consiste en filas y columnas directas. <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í la cuadrícula de CSS porque parecía apropiada debido al estilo de presentación de las filas y también presenta justify-content, que parecía una buena manera de desplazar los elementos secundarios de las filas.

Tipos de carrocería

Comenzando con los diseños de 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 fila

Aquí elegí la cuadrícula de nuevo, pero en lugar de crear filas con ella, usé grid-auto-flow: column para cambiar la dirección a las columnas. Luego, defino los tamaños de las columnas y agrego un poco de padding intercalado a la fila, para que los cuadros no queden en el borde del viewport. Luego, oriento ciertas filas y justifica el contenido en center o end, lo que crea el 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 falta 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? 🙂 ¿Flotantes? ¿Flexbox? ¿gradiente?

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

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

Remixes de la comunidad