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);
}
Written by Frank Fuchs
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Css
Authors
Related Tags
#css
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#