Tag Cloud mit Unterschiedlicher Polsterstärke

Oftmals verwenden „Tag Clouds“ Variationen in Schriftgröße und -stärke, um zwischen häufig und selten verwendeten Tags zu unterscheiden. Hier ist ein anderer Ansatz: Verwenden Sie Rollover-Boxen unterschiedlicher Größe durch variierende Polsterung.

Sie können die verschiedenen Größen wie folgt als Klassen im CSS festlegen

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;
	}

Wenden Sie dann einfach die Klassen wie folgt auf das Anker-Element in der ungeordneten Liste an

<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-BEISPIEL]