DEV Community

Cover image for Create a tag cloud with HTML and CSS

Create a tag cloud with HTML and CSS

Alvaro Montoro on December 31, 2020

A tag cloud is a list of links associated with a term or a tag. It is common to see them in blogs and websites to highlight popular topics visually...
Collapse
 
jonole profile image
Jon Ole Ueland

Here is a 3-liner script that will rid you if the manual setting of the --size variable in the stylesheet.

document.querySelectorAll('ul.cloud a').forEach((i) => {
i.style.setProperty('--size', i.dataset.weight);
});

Collapse
 
murkrage profile image
Mike Ekkel

While this is a simple script, it defeats the purpose of being just HTML and CSS. Still a good solution, tho!

Collapse
 
casiimir profile image
casiimir

That's a really cool effect! I'll study it, thank you for sharing :D

Collapse
 
mjgs profile image
Mark Smith

Great article, tags clouds are awesome :)

Collapse
 
yourdevguy profile image
Mike Haslam

Super cool thanks for sharing

Collapse
 
zaacwilliam1 profile image
Ogunsipe Oluwaseun Isaac (zaacwilliam)

Cool uhn!
I'll study this soon... Happy new year!

Collapse
 
murkrage profile image
Mike Ekkel

Never really thought about how easy it would be to make one of these. Great post, thank you :)

Collapse
 
chovy profile image
chovy

You left out the most important part: how do we calculate weight given a current count and a total count?

Collapse
 
patrick_meppe_2e406b0871d profile image
Patrick Meppe

Hi there.
Is there any reason your are not using the following syntax?
<li><a style="--size: 4" href="/tag/http">HTTP</a></li>

  • It requires less code and does not require JS.
Collapse
 
vaibhavkhulbe profile image
Vaibhav Khulbe

Wow! Loved the use of CSS. Great work. 👏