Création d'une illusion de grille tordue

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é