Eine unterhaltsame Erkundung von Möglichkeiten, eine optische Täuschung mit CSS nachzubilden.
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
Diese Illusion heißt Cafe Wall 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
Für die Textkörper habe ich display: grid
und grid-auto-rows
verwendet, um die Zeilenlayouts zu definieren. 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-Abstand hinzu, damit die Felder nicht bis zum Rand des Darstellungsbereichs reichen. Dann richte ich das Layout auf bestimmte Zeilen aus und richte den Text entweder auf center
oder end
aus, um diesen Versatz 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 Sie nur noch die Farbe der Quadrate ändern und einen Rahmen hinzufügen:
.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
- Markierungen für Stiefel mit Farbverläufen: Demo und Code