Illusion eines schiefen Rasters

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

Adam Argyle

In diesem Beitrag wollen wir ein wenig Spaß haben. Es gibt wahrscheinlich 100 Möglichkeiten, diese optische Täuschung zu erzeugen. Ich möchte Ihnen nur meine Gedanken dazu mitteilen, aber Sie sollten Ihren eigenen Stil ausprobieren. Demo ausprobieren und Quellcode ansehen

Wenn du lieber ein Video ansiehst, findest du hier eine YouTube-Version dieses Beitrags:

Übersicht

Der Name dieser Illusion ist Cafe-Wand-Illusion. Es gibt nirgendwo gekrümmte Linien, aber unsere Augen nehmen Schrägstriche wahr. Es mag schwer zu glauben sein, aber wenn Sie es neu aufbauen, werden Sie die Illusion mit Sicherheit durchschauen.

Markieren & Zeichnen

Die HTML-Datei dafür besteht aus einfachen Zeilen und Spalten. Das <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 das CSS-Raster entschieden, da es aufgrund des Präsentationsstils der Zeilen passend erschien. Außerdem bietet es justify-content, was sich als gute Möglichkeit zum Ausrichten von Zeilenelementen erwies.

Karosserievarianten

Ausgehend von den Karosseriestilen habe ich display: grid und grid-auto-rows verwendet, um die Zeilenlayouts bereitzustellen. Der calc(), der für die Zeilengrößen angezeigt wird, berücksichtigt den Rahmen jeder Zeile und sorgt dafür, dass der Effekt den gesamten Darstellungsbereich ausfüllt.

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

Zeilenstile

Hier habe ich wieder das Raster ausgewählt, aber anstatt damit Zeilen zu erstellen, habe ich mit grid-auto-flow: column die Richtung in Spalten geändert. Dann definiere ich die Spaltengrößen und füge der Zeile ein wenig Inline-Padding hinzu, damit die Rechtecke nicht am Rand des Darstellungsbereichs liegen. Dann richte ich das Targeting auf bestimmte Zeilen aus und richte den Inhalt auf center oder end aus, um diesen Offset zu erzeugen, der die Illusion verstärkt.

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

Quadratische Stile

Jetzt müssen nur noch die Farbe der Quadrate geändert und ein Rahmen hinzugefügt werden:

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

Fazit

Jetzt, da Sie wissen, wie ich das gemacht habe, wie würden Sie es machen? 🙂 Floats? Flexbox? Farbverlauf?!

Lassen Sie uns unsere Ansätze diversifizieren und alle Möglichkeiten kennenlernen, wie Sie im Web entwickeln können.

Erstelle eine Demo, tweete mir Links und ich füge sie unten in den Abschnitt „Community-Remixe“ hinzu.

Remixe der Community