Como criar uma ilusão de grade torta

Uma análise divertida de maneiras de recriar uma ilusão de ótica com CSS.

Adam argyle

Nesta postagem, vamos nos divertir um pouco! Deve haver 100 maneiras de atingir essa ilusão de óptica, e vou apenas compartilhar minhas ideias, mas incentivar você a experimentar seu estilo. Teste a demonstração e veja a fonte.

Se preferir vídeo, aqui está uma versão do YouTube desta postagem:

Visão geral

O nome dessa ilusão é Ilusão do Café Wall. Não há linhas tortas em nenhum lugar, mas nossos olhos percebem inclinações. Pode ser difícil de acreditar, mas reconstruí-lo definitivamente ajudará você a ver através da ilusão.

Marcação

O HTML para isso são linhas e colunas simples. O <body> é o contêiner com <div class="row"> para filhos. 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 deslocar filhos de linha.

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 das linhas 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 as colunas. Em seguida, defino os tamanhos das colunas e adiciono um pouco de padding inline à linha, para que as caixas não fiquem na borda da janela de visualização. Em seguida, segmento certas 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 só falta alterar a cor do quadrado e adicionar uma borda:

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

Conclusão

Agora que você sabe como eu fiz isso, como você iria?! 🙂 Flutuantes? Flexbox? Gradiente?!

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

Crie uma demonstração, envie um tweet para mim e os adicionarei à seção de remixes da comunidade abaixo.

Remixes da comunidade