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
- Mark Boots com gradientes: demonstração e código