Creazione di un'illusione a griglia storta

Un'esplorazione divertente dei modi per ricreare un'illusione ottica con CSS.

Adam Argyle

In questo post ci divertiremo un po'. Esistono 100 modi per ottenere questa illusione ottica e io condividerò con te solo i miei pensieri, ma ti incoraggio a provare il tuo stile. Prova la demo e visualizza l'origine.

Se preferisci i video, ecco una versione di questo post su YouTube:

Panoramica

Il nome di questa illusione è illusione della parete del caffè. Non ci sono linee storte da nessuna parte, ma i nostri occhi percepiscono delle inclinazioni. Potrebbe essere difficile da credere, ma la ricostruzione ti aiuterà sicuramente a vedere attraverso l'illusione.

Segni e linee

Il codice HTML per questa tabella è costituito da semplici righe e colonne. Il <body> è il contenitore con <div class="row"> per i bambini. Ogni riga contiene cinque elementi <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>
…

Stili

Ho scelto CSS Grid perché mi sembrava adatta allo stile di presentazione delle righe e perché include justify-content che mi sembrava un buon modo per compensare gli elementi secondari delle righe.

Versioni

A partire dagli stili del corpo, ho utilizzato display: grid e grid-auto-rows per fornire i layout delle righe. Il valore calc() che vedi per le dimensioni delle righe tiene conto del bordo di ogni riga e contribuisce a far sì che l'effetto si adatti all'intero viewport.

body {
  display: grid;
  grid-auto-rows: calc(20vh - 4px);
  gap: 4px;
  background: gray;
  margin: 0;
}

Stili riga

Qui ho scelto di nuovo la griglia, ma invece di creare righe ho utilizzato grid-auto-flow: column per cambiare la direzione in colonne. Poi definisco le dimensioni delle colonne e aggiungo un po' di spaziatura interna alla riga, in modo che le caselle non si scontrino con il bordo dell'area visibile. Poi prendo di mira determinate righe e giustifico i contenuti a sinistra center o a destra end, creando l'offset che alimenta l'illusione.

.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;
}

Stili quadrati

Ora non ti resta che cambiare il colore dei quadrati e aggiungere un bordo:

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

Conclusione

Ora che sai come ho fatto, come faresti tu? 🙂 Galleggianti? Flexbox? Gradiente?!

Diversifichiamo i nostri approcci e impariamo tutti i modi per creare sul web.

Crea una demo, inviami un tweet con i link e la aggiungerò alla sezione dei remix della community qui sotto.

Remix della community