Exploration amusante de différentes façons de recréer une illusion d'optique avec CSS.
Dans cet article, nous allons nous amuser un peu ! Il doit y avoir 100 façons d'obtenir cette illusion d'optique. Je vais simplement vous partager mes réflexions, mais je vous encourage à essayer votre style. Essayez la démonstration et consultez la source.
Si vous préférez regarder une vidéo, voici une version YouTube de cet article:
Présentation
Cette illusion s'appelle l'illusion du mur de café. Il n'y a aucune ligne tordue, mais nos yeux perçoivent des inclinaisons. Cela peut sembler difficile à croire, mais le reconstruire vous aidera certainement à voir au-delà de l'illusion.
Annoter
Le code HTML correspondant se compose de lignes et de colonnes simples. <body>
est le conteneur avec <div class="row">
pour les enfants. Chaque ligne contient cinq éléments <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>
…
Styles
J'ai choisi la grille CSS, car elle semblait adaptée au style de présentation des lignes. Elle comporte également justify-content
, qui semblait être un bon moyen de décaler les enfants de la ligne.
Carrosseries
En commençant par les styles de corps, j'ai utilisé display: grid
et grid-auto-rows
pour fournir les mises en page des lignes. La calc()
que vous voyez pour les tailles de ligne tient compte de la bordure de chaque ligne et permet à l'effet de s'adapter à la fenêtre d'affichage complète.
body {
display: grid;
grid-auto-rows: calc(20vh - 4px);
gap: 4px;
background: gray;
margin: 0;
}
Styles de ligne
Ici, j'ai à nouveau choisi la grille, mais au lieu de créer des lignes avec elle, j'ai utilisé grid-auto-flow: column
pour modifier l'orientation en colonnes. Je définis ensuite les tailles de colonne et ajoute un peu de marge intérieure à la ligne, afin que les cases ne se chevauchent pas avec le bord de la fenêtre d'affichage. Je cible ensuite certaines lignes et justifie le contenu sur center
ou end
, créant ainsi le décalage qui alimente l'illusion.
.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;
}
Styles carrés
Il ne vous reste plus qu'à modifier la couleur des carrés et à ajouter une bordure:
.square {
border-inline: 4px solid gray;
background: black;
}
Conclusion
Maintenant que vous savez comment j'ai fait, comment pourriez-vous faire ? 🙂 Flotteurs ? Flexbox ? Dégradé ?!
Diversifions nos approches et découvrons toutes les façons de créer sur le Web.
Créez une démo, tweetez-moi des liens et je les ajouterai à la section "Remix de la communauté" ci-dessous.
Remix de la communauté
- Marquer des bottes avec des dégradés: démo et code