Tag Cloud with Varied Padding Thickness

Avatar of Chris Coyier
Chris Coyier on

UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.

Often times “tag clouds” use variations in font-size and font-weight to distinguish between heavy use and light use tags. Here is another approach: use rollover boxes of different sizes through varied amounts of padding.

tagcloudpadding.png

You can set the different sizes up as classes in the CSS like so:

ul {
	margin-top: 50px;
	list-style-type: none;
}

li {
	float: left;
}

ul li a {
	text-decoration: none;
	line-height: 2.3em;
}

ul li a.size1 {
	color: #666;
	padding: 2px;
}
	ul li a.size1:hover {
		background-color: #999;
		color: white;
	}

ul li a.size2 {
	color: #912600;
	padding: 12px;
}
	ul li a.size2:hover {
		background-color: #cc3500;
		color: white;
	}

ul li a.size3 {
	color: #877900;
	padding: 18px;
}
	ul li a.size3:hover {
		background-color: #d8c100;
		color: white;
	}
	
ul li a.size4 {
	color: #1d6c01;
	padding: 8px;
}
	ul li a.size4:hover {
		background-color: #2daf00;
		color: white;
	}
ul li a.size5 {
	color: #004e6b;
	padding: 6px;
}
	ul li a.size5:hover {
		background-color: #007ead;
		color: white;
	}
	
ul li a.size6 {
	color: #430069;
	padding: 24px;
}
	ul li a.size6:hover {
		background-color: #7600b9;
		color: white;
	}

Then just apply the classes to the anchor element in the unordered list like so:

<ul>
	<li><a class="size1" href=#">adobe</a></li>
	<li><a class="size2" href=#">animation</a></li>
	<li><a class="size3" href=#">arts</a></li>
	<li><a class="size4" href=#">bizarre</a></li>
	<li><a class="size5" href=#">blogs</a></li>
	<li><a class="size6" href=#">books</a></li>
	...etc
</ul>

[LIVE EXAMPLE]