Création d'une illusion de grille tordue

Une exploration amusante des moyens de recréer une illusion d'optique avec le CSS.

Adam Argyle

Nous allons nous amuser un peu dans ce post ! Il doit y avoir 100 façons d'obtenir cette illusion d'optique. Je vais seulement vous faire part de mes réflexions, mais je vous encourage à essayer votre style. Essayez la démonstration et affichez la source.

Si vous préférez la vidéo, voici une version YouTube de ce post:

Présentation

Le nom de cette illusion est illusion du mur du café. Il n'y a pas de lignes tordues à trouver quelque part, mais nos yeux perçoivent des inclinaisons. C'est peut-être difficile à croire, mais la reconstruire vous aidera à percer les illusions.

Markup

Pour cela, le code HTML se compose de lignes et de colonnes simples. <body> est le conteneur contenant <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 me semblait adaptée au style de présentation des lignes et elle présente également justify-content, qui semblait être un bon moyen de décaler les éléments enfants de 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. 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 ligne

Ici, j'ai choisi une nouvelle fois la grille, mais au lieu de créer des lignes avec celle-ci, j'ai utilisé grid-auto-flow: column pour changer la direction des colonnes. Ensuite, je définis la taille des colonnes et j'ajoute une marge intérieure intégrée à la ligne afin que les cases ne dépassent pas le bord de la fenêtre d'affichage. Ensuite, je cible certaines lignes et justifie le contenu sur center ou end, ce qui crée ce 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 tu en ferais ?! 😃 Des flotteurs ? Flexbox? Dégradé ?!

Diversissons nos approches et apprenons toutes les façons de créer sur le Web.

Créez une démo, cliquez sur les liens tweet me, et je l'ajouterai à la section "Remix" de la communauté ci-dessous.

Remix de la communauté