Tag cloud of random sizes in pure CSS


Published on 2nd November 2015

Last week I faced a need to make a fake tag cloud, where the words need to be of different size. This was needed for a presentation slide, and as my slides are always in HTML/CSS, must be implemented with these technologies. It is always possible to inject some JavaScript and code anything. But what about pure CSS, do we get random sizes there?

performance testing stress testing conformance testing acceptane testing smoke testing regression testing white box testing functional testing system testing black box testing load testing compatibility testing unit testing

The tag cloud you see above is what I get. You may notice it's not real random; after refreshing you will always get the same result. But still looks like a tag cloud of different sizes and works perfectly as an example.

This is a list, it's easy to generate from markdown:

<ul class="cloud"><li>performance testing</li><li>stress testing</li><li>conformance testing</li><li>acceptane testing</li><li>smoke testing</li>...</ul>

Then, flattened as usual:

.cloud {display: inline;list-style-type: none;width: 400px;}.cloud li {list-style: none;display: inline;}

And then different sizes are made with a few nth-of-typecombined in different variants:

.cloud li:nth-of-type(3n + 1) {font-size: 1.25em;}.cloud li:nth-of-type(4n+3) {font-size: 1.5em;}.cloud li:nth-of-type(5n - 3) {font-size: 1em;}

I tuned the nth-of-typevalues so that it would look nicely. Depending on the length of the words used, you may need to play arownd with the values and maybe use more than 3 sizes.