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.
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>
Not a bad idea, I personally do not like tag clouds however.
I noticed with your live example that if you scroll over “mac os” and go to “multimedia”, it can be a bit touchy as “web design” below it is a bigger cloud and quite a few times I accidently got “web design” instead of “multimedia”.
The idea actually came from another blog of mine, FreshPhotograph.com, where I used a similar technique for the archives. It may be a bit more successful over there.
Awesome.
Just what I was looking for. Great stuff :) And a very nice site you have here, just found out about it.
Chrz