Como criar uma ilusão de grade torta

Uma exploração divertida de maneiras de recriar uma ilusão de ótica com CSS.

Adam Argyle

Nesta postagem, vamos nos divertir um pouco! Existem 100 maneiras de criar essa ilusão de ótica, e vou compartilhar com você apenas minhas ideias, mas incentivo você a tentar seu estilo. Teste a demonstração e veja a fonte.

Se preferir vídeo, confira uma 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 a confiança vai ajudar você a enxergar a verdade.

Marcação

O HTML para isso é simples: 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 ela parecia adequada ao estilo de apresentação das linhas e também apresenta justify-content, que parecia uma boa maneira de compensar os filhos das linhas.

Estilos de carroceria

Começando com os estilos do 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 em 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 de novo, 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 das colunas e adiciono um pouco de padding inline à linha para que as caixas não entrem na borda da janela de visualização. Depois, eu segmentava determinadas linhas e justificava o conteúdo como 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, basta 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 isso, como você faria? 🙂 Flutuantes? Flexbox? Gradiente?!

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

Crie uma demonstração, me envie um tweet com o link, e eu vou adicionar à seção de remixes da comunidade abaixo.

Remixes da comunidade