Création d'une illusion de grille tordue

Une exploration amusante des façons de recréer une illusion d'optique avec CSS.

Adam Argyle

Dans cet article, nous allons nous amuser un peu ! Il doit exister 100 façons de créer cette illusion d'optique. Je vais simplement vous donner mon avis, mais je vous encourage à essayer votre propre style. Essayez la démo et consultez la source.

Si vous préférez les vidéos, voici une version YouTube de cet article :

Présentation

Cette illusion s'appelle l'illusion du mur du café. Il n'y a pas de lignes tordues, 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 est constitué 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 CSS grid, car cela semblait approprié compte tenu du style de présentation des lignes. Il comporte également justify-content, qui semblait être un bon moyen de décaler les enfants des lignes.

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. Le calc() que vous voyez pour les tailles de ligne tient compte de la bordure de chaque ligne et permet à l'effet de s'adapter à l'ensemble de la fenêtre d'affichage.

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

Styles de lignes

Ici, j'ai de nouveau choisi la grille, mais au lieu de créer des lignes avec, j'ai utilisé grid-auto-flow: column pour changer la direction en colonnes. Je définis ensuite la taille des colonnes et ajoute un peu de marge intérieure à la ligne pour que les boîtes ne touchent pas le bord de la fenêtre d'affichage. Ensuite, je cible certaines lignes et je justifie le contenu sur center ou end, ce qui crée 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 feriez-vous ? 🙂 Nombres décimaux ? 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 les liens et je l'ajouterai à la section des remix de la communauté ci-dessous !

Remix de la communauté