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 alcançar essa ilusão de óptica, e só vou compartilhar o que penso, mas encorajo você a experimentar seu estilo. Teste a demonstração e confira a origem.

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 de acreditar, mas reconstruir isso definitivamente ajudará você a ver através da 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 segmento determinadas linhas e justifico o conteúdo para center ou end, criando esse 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 só 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