Wir zeigen dir, wie du mit CSS optische Täuschungen nachahmen kannst.
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
- Markieren Sie „Stiefel“ mit Farbverläufen: Demo und Code