Création d'une illusion de grille tordue

Exploration amusante de différentes façons de recréer une illusion d'optique avec CSS.

Adam Argyle

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 la 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. C'est peut-être difficile à croire, mais le reconstruire vous aidera certainement à voir à travers 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 la mise 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 tu sais comment j'ai fait, comment faire ?! 🙂 Flotteurs ? Flexbox ? Dégradé ?

Diversifiez nos approches et découvrons toutes les manières de créer des applications sur le Web.

Créez une démo, envoyez-moi des tweets via des liens et je l'ajouterai à la section "Remix de la communauté" ci-dessous.

Remix de la communauté