Tag cloud of random sizes in pure CSS

02 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-type combined 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-type values 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.

You can hire me and the whole Bridge-the-Gap team to set up, manage, develop, and champion your design system. I can align the design and development processes in your organisation for a larger business impact.

© Varya Stepanova 2024