Pseudo-zufälliges Hinzufügen von Illustrationen mit CSS

Zwischen jedem Beitrag von Erics Blog gibt es diese ziemlich schöne Illustration, die zufällig eine von diesen fünf Optionen sein kann

Eric hat jede Illustration zu einem separaten Hintergrundbild gemacht und schaltet dann dieses Bild mit der CSS-Eigenschaft nth-of-type um, so:

.entry:nth-of-type(2n+1)::before {
   background-image: url(image-1.png);
}

.entry:nth-of-type(3n+1)::before {
   background-image: url(image-2.png);
}

.entry:nth-of-type(4n+1)::before {
   background-image: url(image-3.png);
}

.entry:nth-of-type(5n+1)::before {
   background-image: url(image-4.png);
}

Dies scheint ein guter Zeitpunkt zu sein, um unser eigenes kleines :nth Tester-Tool zu bewerben. Es hilft mir definitiv zu verstehen, was zum Beispiel (2n+1) auf Englisch bedeutet. Sie können jede beliebige Zeichenfolge eingeben und sehen, welche Auswirkung sie auf Ihre Website hat

Jedenfalls, zurück zu Erics Beitrag. Wie er erwähnt, ist seine Technik *pseudo-zufällig*, da es sich um ein zufällig erscheinendes Bild auf der Seite handelt, es aber technisch gesehen nicht ist. So oder so, ich denke, es ist eine wirklich schöne Technik! Und es durchbricht sicherlich die visuelle Monotonie, die auftritt, wenn man zu lange auf eine Website starrt.

Hier sehen Sie, wie es in der Praxis aussieht

Schöne Sache!

Ein anderer Weg, dies zu tun, ist die Verwendung von zufälligen Zahlen in CSS. Zum Beispiel könnten wir eine Variable in JavaScript setzen und sie dann mit CSS-Custom-Properties anwenden. Oder wir könnten alle Bilder in eine einzige Sprite-Datei legen und die background-position basierend auf einer Zufallszahl ändern.

Dies ist definitiv eines dieser Dinge in CSS, bei denen es keine falschen Antworten gibt; nur verschiedene Wege, um dasselbe großartige Ding zu tun!