Simulierter Zufall mit CSS

29. April 2011

Vor kurzem las ich einen interessanten Artikel von Alex Walker, in dem er beschreibt wie man mit dem von ihm „cicada principle“ genannten Umstand, dass Primzahlen sehr wenige gemeinsame Vielfache mit anderen beliebigen Zahlen haben, sehr einfach sich scheinbar nicht wiederholende Hintergründe mit CSS erstellen kann.

Da ich in meinen Webdesigns nur selten unruhige Hintergründe benutze und man bei ruhigen Hintergründen selten ein Problem mit sichtbaren Wiederholungen hat, kam mir der Gedanke, dass sich das doch auch gut auf andere Bereiche anwenden lässt.

Wie wäre es zum Beispiel mit einer Photogalerie bei der die Thumbnails in der Übersicht „zufällig“ gedreht liegen. Denn was hilft es wenn ich zwar per CSS3 Elemente drehen kann, aber das dann auch wieder sehr uniform aussieht oder ich alle Bilder einzeln individuell verdrehen muss.

Also losgelegt, meinen Flickr-Foto-Feed auf eine Seite gebracht und dann jedes 2., 3., 5. und 7. Element verdreht (:nth-child(2n)).
Hier stellt sich dann nur das Problem ein, dass gerade bei den ersten Bildern, eben wegen der nicht vorkommenden gemeinsamen Vielfachen doch wieder eine gewisse Regelmäßigkeit auftritt. Also als nächsten Schritt eine zweite „Ebene“ Primzahlen in’s Spiel gebracht. Nämlich jedes 2. Bild beginnend beim 1., jedes 3. beginnend beim 2., jedes 5. beginnend beim 3. und jedes 7. beginnend beim 5. Bild (:nth-child(2n+1)) – und Voilà, es schaut meiner Meinung nach ausreichend zufällig aus.

Mein HTML hierzu baut sich wie folgt auf:

<ul class="pictures">
	<li><a href="grossesBild.jpg" title"…"><img src="kleinesBild.jpg" alt="…" /></a></li>
	<li><a href="grossesBild.jpg" title"…"><img src="kleinesBild.jpg" alt="…" /></a></li>
	…
	<li><a href="grossesBild.jpg" title"…"><img src="kleinesBild.jpg" alt="…" /></a></li>
</ul>

Und das CSS dazu:

.pictures li {
	display: inline-block;
	width: 75px;
	height: 75px;
	margin: 0 12px 12px 0;
	padding: 4px;
	background-color: #fafafa;
	-moz-box-shadow: 2px 2px 6px #111;
	-webkit-box-shadow: 2px 2px 6px #111;
	box-shadow: 2px 2px 6px #111;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
}
.pictures li:nth-child(2n+1) {
	-moz-transform: rotate(-2deg);
	-webkit-transform: rotate(-2deg);
	-o-transform: rotate(-2deg);
	-ms-transform: rotate(-2deg);
	transform: rotate(-2deg);
}
.pictures li:nth-child(3n+2) {
	-moz-transform: rotate(1deg);
	-webkit-transform: rotate(1deg);
	-o-transform: rotate(1deg);
	-ms-transform: rotate(1deg);
	transform: rotate(1deg);
}
.pictures li:nth-child(5n+3) {
	-moz-transform: rotate(-3deg);
	-webkit-transform: rotate(-3deg);
	-o-transform: rotate(-3deg);
	-ms-transform: rotate(-3deg);
	transform: rotate(-3deg);
}
.pictures li:nth-child(7n+5) {
	-moz-transform: rotate(6deg);
	-webkit-transform: rotate(6deg);
	-o-transform: rotate(6deg);
	-ms-transform: rotate(6deg);
	transform: rotate(6deg);
}
.pictures li:nth-child(11n+7) {
	-moz-transform: rotate(4deg);
	-webkit-transform: rotate(4deg);
	-o-transform: rotate(4deg);
	-ms-transform: rotate(4deg);
	transform: rotate(4deg);
}

Eine Demogalerie könnt Ihr hier sehen (CSS3 fähiger Browser vorausgesetzt).

Falls Euch noch weitere Möglichkeiten zum Einsatz dieses Prinzips einfallen, oder Ihr vielleicht gleich etwas danach umgesetzt habt, freue ich mich über ein Kommentar.

Alle Artikel

Dies ist ein sehr alter Blog. Die Artikel werden weiter unter ihrer URL verfügbar gehalten. Man sollte aber davon ausgehen, dass ein Großteil der Informationen, Links und Tipps veraltet sind.