Illusion eines schiefen Rasters

Wir zeigen dir, wie du mit CSS optische Täuschungen nachahmen kannst.

Adam Argyle

In diesem Beitrag soll es ein wenig Spaß machen. Es gibt 100 Möglichkeiten, diese optische Täuschung zu erreichen. Ich möchte Ihnen nur meine Gedanken mitteilen, aber Sie sollten Ihren Stil ausprobieren. Sehen Sie sich die Demo an und sehen Sie sich den Quellcode an.

Falls du lieber ein Video hast, findest du hier eine YouTube-Version dieses Beitrags:

Überblick

Der Name dieser Täuschung lautet Café Wall Illusion. Es gibt nirgendwo schiefe Linien, aber unsere Augen nehmen Schrägstriche wahr. Es mag schwer zu glauben sein, aber durch den Wiederaufbau werden Sie die Täuschung auf jeden Fall durchsehen.

Markup

Der HTML-Code besteht hierfür aus einfachen Zeilen und Spalten. <body> ist der Container mit <div class="row"> für untergeordnete Elemente. 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 das CSS-Raster ausgewählt, weil es angesichts des Präsentationsstils der Zeilen passend schien. Außerdem enthält es justify-content, was eine gute Möglichkeit schien, Zeilenunterelemente zu verschieben.

Karosserievarianten

Angefangen mit den Karosseriestilen habe ich display: grid und grid-auto-rows verwendet, um die Zeilenlayouts bereitzustellen. 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

Hier habe ich wieder das Raster ausgewählt, aber anstatt Zeilen damit zu erstellen, habe ich grid-auto-flow: column verwendet, um die Richtung der Spalten zu ändern. Dann definiere ich die Spaltengrößen und füge der Zeile etwas Inline-Abstand hinzu, damit die Boxen nicht am Rand des Darstellungsbereichs laufen. Dann richte ich das Targeting auf bestimmte Zeilen aus und richte den Inhalt entweder mit center oder end aus, um diesen Offset zu erzeugen, der die Täuschung 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 Sie nur noch die Farbe der Quadrate ändern und einen Rahmen hinzufügen:

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

Fazit

Jetzt, wo du weißt, wie ich es gemacht habe, wie würdest du es tun?! 🙂 Es schwebt? Flexbox? Farbverlauf?!

Diversifizieren wir unsere Ansätze und lernen Sie alle Möglichkeiten kennen, wie wir das Web nutzen können.

Erstelle eine Demo und twittere mich über Links, und ich füge sie unten zum Abschnitt über Community-Remixe hinzu.

Community-Remixe