BrainSellers - Frank Fuchs Mediendesign

Faked Random with CSS and the „Cicada Principle“

Inspired by Alex Walkers article The Cicada Principle and Why It Matters to Web Designers, I thought of ways to use this not only for background images, but for anything where you want to fake random.

so I came up with …

„Randomly“ Rotated Images

You have to turn on JavaScript to view that gallery.

As Alex describes in his "cicada principle", you have very few common multiples with prime numbers. So I used the :nth-child selector to rotate every 2nd, 3rd, 5th, 7th … image. But because that doesn't manipulate the first few pictures enough to make it look random, I brought another layer of prime numbers to it. :nth-child(3n+2), :nth-child(5n+3), :nth-child(7n+5) …

I made a more detailed description in this article (only in german). But I guess you'll understand my method by simply looking at the example code below.

Code Example

the HTML

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

And the CSS

.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);
}