Illusion eines schiefen Rasters

Eine unterhaltsame Erkundung von Möglichkeiten, eine optische Täuschung mit CSS nachzubilden.

Adam Argyle

In diesem Beitrag geht es um ein bisschen Spaß. Es gibt bestimmt 100 Möglichkeiten, diese optische Täuschung zu erzielen. Ich möchte euch nur meine Gedanken dazu mitteilen, aber euch ermutigen, euren eigenen Stil zu finden. Demo ansehen und Quellcode aufrufen

Wenn du lieber ein Video ansehen möchtest, findest du hier eine YouTube-Version dieses Beitrags:

Übersicht

Diese optische Täuschung wird als Café-Wand-Illusion bezeichnet. Es gibt nirgendwo krumme Linien, aber unsere Augen nehmen Neigungen wahr. Es mag schwer zu glauben sein, aber wenn du es nachbaust, wirst du die Illusion durchschauen.

Markieren & Zeichnen

Das HTML dafür besteht aus einfachen Zeilen und Spalten. Die <body> ist der Container mit <div class="row"> für Kinder. Jede Zeile enthält fünf <div class="square">-Elemente.

<div class="row">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>
…

Stile

Ich habe mich für CSS-Grid entschieden, weil es aufgrund der Darstellung von Zeilen passend erschien und auch justify-content bietet, was eine gute Möglichkeit zum Versetzen von untergeordneten Elementen in Zeilen ist.

Karosserievarianten

Ich habe mit den Body-Stilen begonnen und display: grid und grid-auto-rows für die Zeilenlayouts verwendet. Bei der calc() für die Zeilengrößen wird der Rahmen jeder Zeile berücksichtigt, damit der Effekt in den gesamten Darstellungsbereich passt.

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

Zeilenstile

Ich habe wieder „grid“ ausgewählt, aber anstatt Zeilen zu erstellen, habe ich grid-auto-flow: column verwendet, um die Richtung in Spalten zu ändern. Anschließend definiere ich die Spaltengrößen und füge der Zeile etwas Inline-Abstand hinzu, damit die Kästen nicht an den Rand des Darstellungsbereichs stoßen. Dann richte ich bestimmte Zeilen aus und richte den Inhalt entweder center oder end aus. So entsteht der Versatz, der die Illusion erzeugt.

.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;
}

Square-Stile

Jetzt müssen Sie nur noch die Farbe der Quadrate ändern und einen Rahmen hinzufügen:

.square {
  border-inline: 4px solid gray;
  background: black;
}

Fazit

Jetzt wissen Sie, wie ich es gemacht habe. Wie würden Sie es machen? 🙂 Floats? Flexbox? Gradient?!

Wir möchten unsere Ansätze diversifizieren und alle Möglichkeiten kennenlernen, die das Web bietet.

Erstelle eine Demo, schick mir einen Tweet mit den Links und ich füge sie unten im Bereich „Community-Remixe“ hinzu.

Community-Remixe