Last Updated: February 25, 2016
·
1.155K
· brainseller

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

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 guess you'll understand my method by simply looking at the example code below.

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