Un'esplorazione divertente dei modi per ricreare un'illusione ottica con i CSS.
In questo post ci divertiremo un po'! Devono esserci 100 modi per ottenere questa illusione ottica e ti condividerò solo i miei pensieri, ma ti incoraggio a provare il tuo stile. Prova la demo e visualizza la fonte.
Se preferisci i video, ecco una versione di YouTube di questo post:
Panoramica
Il nome di questa illusione è Cafe Wall Illusion. Non si possono trovare linee storte, ma i nostri occhi percepiscono le inclinazioni. Può essere difficile da credere, ma ricostruire questa lingua ti aiuterà sicuramente a percepire l'illusione.
Markup
Il codice HTML per questa operazione è costituito da righe e colonne semplici. <body>
è il container 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 la griglia CSS
perché mi sembrava adatta allo stile di presentazione delle righe e presenta anche
justify-content
che sembrava un buon modo per spostare gli elementi secondari delle righe.
Versioni
A partire dagli stili della carrozzeria, ho usato display: grid
e grid-auto-rows
per
fornire i layout delle righe. Il valore calc()
che vedi per le dimensioni delle righe prende in considerazione
il bordo di ogni riga e consente di adattare l'effetto all'intera area visibile.
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 con questa, ho usato
grid-auto-flow: column
per cambiare la direzione in colonne. Definisco quindi le dimensioni delle colonne e aggiungo una piccola spaziatura interna incorporata nella riga, in modo che le caselle non raggiungano il bordo dell'area visibile. Quindi scelgo come target alcune righe e giustificato il contenuto in
center
o end
, creando quell'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
Non ti resta che modificare il colore dei quadrati e aggiungere un bordo:
.square {
border-inline: 4px solid gray;
background: black;
}
Conclusione
Ora che sai come ci sono riuscito, come faresti?! 🙂 Float? Flexbox? Gradiente?!
Diversifica i nostri approcci e scopriamo tutti i modi per creare sul web.
Crea una demo, inviami un tweet con i link e lo aggiungerò alla sezione Remix della community di seguito.
Remix della community
- Contrassegna gli stivali con gradienti: demo e codice