Uma análise divertida de maneiras de recriar uma ilusão de ótica com CSS.
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
- Marque Inicialização com gradientes: demonstração e código