Posted on by & filed under Content - Highlights and Reviews, Web Development.

Sometimes a design needs a little chaos to help it look more naturalistic, but CSS doesn’t include a way to create random numbers or patterns. In some circumstances, however, we can use existing CSS properties to create the illusion of randomness.

One way to provide that illusion is to use the :nth-child (or :nth-of-type) pseudo classes. These classes use a numeric value (that selects elements based upon their position in the DOM tree), and you can combine this with the power of the cascade to create sequences of numbers that are apparently random.

Here’s an example to explain what I mean: given a list containing many items, I can use :nth-child to apply slightly different values to the transform property for each item at a given position:

Using a sequence like this may at first seem that the pattern of the transformations will be too regular, but the cascade of rules in CSS means that some properties will be over-ruled by others: where 2n and 3n have the same values, 3n will take precedence, and where 3n and 5n have the same values, 5n will take precedence, and so on.
What this means is that you’ll rarely find repeated sequences of transformed elements, making it look as if they’ve been applied randomly. You can see this illustrated in the picture below, which shows these rules applied to a list of image icons.

Try using the nth-child on your own designs!

Safari Books Online has the content you need

Learn more about CSS in these books found in Safari Books Online:

The Book of CSS3, by Peter Gasston and author of this post, uses real-world examples to teach developers the fundamentals of the CSS3 specification, highlighting the latest developments and future features, while paying close attention to current browser implementations. Each chapter examines a different CSS3 module, and teaches the reader to use exciting new features like web fonts, background images, gradients, 2D and 3D transformations, animation, box effects, and more.
This second edition of CSS: The Missing Manual combines crystal-clear explanations, real-world examples, and dozens of step-by-step tutorials to show you how to design sites with CSS that work consistently across browsers.
In Stunning CSS3: A Project-Based Guide to the Latest in CSS, the reader will learn the most popular and well-supported current CSS 3 techniques, including instructions on how to accommodate older browsers, plus some CSS3 techniques that will be available in future browser versions.
In CSS: The Definitive Guide, 3rd Edition provides you with a comprehensive guide to CSS implementation, along with a thorough review of all aspects of CSS 2.1. Updated to cover Internet Explorer 7, Microsoft’s vastly improved browser, this new edition includes content on positioning, lists and generated content, table layout, user interface, paged media, and more.

About the Author

  Peter Gasston is a web developer, writer, public speaker, and author of The Book of CSS3. He blogs at Broken Links and tweets as @stopsatgreen. He lives in London, England.

Tags: CSS, pseudo classes, randomization,

Trackbacks/Pingbacks

  1.  Practical CSS Tips on the Safari Books Blog - Broken Links