Como criar uma ilusão de grade torta

Uma maneira divertida de recriar uma ilusão de ótica com CSS.

Nesta postagem, vamos nos divertir um pouco. Deve haver 100 maneiras de criar essa ilusão de ótica, e vou apenas compartilhar meus pensamentos, mas encorajo você a tentar seu estilo. Teste a demonstração e confira o código-fonte.

Se preferir vídeos, confira a versão desta postagem no YouTube:

Visão geral

O nome dessa ilusão é Ilusão da parede do café. Não há linhas tortas em lugar nenhum, mas nossos olhos percebem inclinações. Pode ser difícil acreditar, mas reconstruir a imagem vai ajudar você a perceber a ilusão.

Marcação

O HTML para isso é simples, com linhas e colunas. O <body> é o contêiner com <div class="row"> para crianças. Cada linha contém 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

Escolhi a grade CSS porque parecia adequada para o estilo de apresentação das linhas e também apresenta justify-content, que parecia uma boa maneira de compensar as linhas filhas.

Estilos de carroceria

Começando com os estilos de corpo, usei display: grid e grid-auto-rows para fornecer os layouts de linha. O calc() que você vê para os tamanhos de linha considera a borda de cada linha e ajuda o efeito a se ajustar à janela de visualização completa.

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

Estilos de linha

Aqui, escolhi a grade novamente, mas, em vez de criar linhas com ela, usei grid-auto-flow: column para mudar a direção para colunas. Em seguida, defino os tamanhos de coluna e adiciono um pequeno padding inline à linha, para que as caixas não apareçam na borda da janela de visualização. Em seguida, eu seleciono determinadas linhas e justifico o conteúdo para center ou end, criando o deslocamento que alimenta a ilusão.

.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 quadrados

Agora, falta apenas mudar a cor dos quadrados e adicionar uma borda:

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

Conclusão

Agora que você sabe como eu fiz, como você faria? 🙂 Flutua? Flexbox? Gradiente?!

Vamos diversificar nossas abordagens e aprender todas as maneiras de criar na Web.

Crie uma demonstração, envie links para mim e vou adicionar à seção de remixes da comunidade abaixo.

Remixes da comunidade