Un'esplorazione divertente dei modi per ricreare un'illusione ottica con CSS.
In questo post ci divertiremo un po'. Ci devono essere 100 modi per creare questa illusione ottica e io condividerò solo le mie idee, ma ti incoraggio a provare il tuo stile. Prova la demo e visualizza la fonte.
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, ma i nostri occhi percepiscono delle inclinazioni. Potrebbe essere difficile da credere, ma ricostruirlo ti aiuterà sicuramente a vedere oltre l'illusione.
Segni e linee
Il codice HTML è costituito da righe e colonne semplici. <body>
è il contenitore con <div class="row">
per 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 la griglia CSS
perché mi sembrava adatta allo stile di presentazione delle righe e include anche
justify-content
che mi sembrava un buon modo per compensare le righe secondarie.
Versioni
A partire dagli stili del corpo, ho utilizzato display: grid
e grid-auto-rows
per fornire i layout delle righe. Il valore calc()
visualizzato per le dimensioni delle righe tiene conto del bordo di ogni riga e consente all'effetto di adattarsi all'intero viewport.
body {
display: grid;
grid-auto-rows: calc(20vh - 4px);
gap: 4px;
background: gray;
margin: 0;
}
Stili di riga
Qui ho scelto di nuovo la griglia, ma invece di creare righe, ho utilizzato grid-auto-flow: column
per cambiare l'orientamento in colonne. Poi definisco le dimensioni delle colonne e aggiungo un po' di spaziatura interna alla riga, in modo che le caselle non si sovrappongano al bordo dell'area visibile. Poi scelgo come target determinate righe e giustifico i contenuti su center
o 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 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? 🙂 Galleggianti? Flexbox? Gradiente?!
Diversifichiamo i nostri approcci e impariamo tutti i modi per creare sul web.
Crea una demo, twittami i link e io la aggiungerò alla sezione dei remix della community di seguito.
Remix della community
- Segnaposto con gradienti: demo e codice