Using nth child to create faux random presentation.

by Maksim

HTML

<ul id="random">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

CSS

#random li {
    background:#ccc;
    width:100px;
    height:100px;
    margin:5px;
    display:inline-block;
}
#random li { 
    -webkit-transform: rotate(2.75deg); 
}
#random li:nth-child(1n) { 
    background:#333; 
}
#random li:nth-child(2n) { 
    -webkit-transform: none; 
    background:pink; 
}
#random li:nth-child(3n) { 
    -webkit-transform: rotate(-2.5deg); 
    background:green; 
}
#random li:nth-child(5n) { 
    -webkit-transform: scale(1.1); 
    background:turquoise;
}
#random li:nth-child(6n) { 
    -webkit-transform: rotate(4deg); 
    background:purple; 
}
#random li:nth-child(7n) { 
    -webkit-transform: rotate(-4deg); 
    background:darkorange; 
}

JavaScript

// inspired by: http://blog.safaribooksonline.com/2012/02/27/css-tip-faking-randomization-with-nth-child/?utm_source=html5weekly&utm_medium=email