Pretty tag cloud: Stage 1
Table of contents:
Introduction
As mentioned in my previous blog entry, I’ve been thinking about implementing a wordle/tagul plug-in for Wordpress using CSS3 only. I’ve just spent about 15 minutes experimenting and have already gotten quite far.
The tags
To make things simple I’ve taken the HTML from my own tag cloud, although slightly modified. For CSS3 to work, the tags need to be divided into groups for colour and size, tag-grp-# and tag-score-#.
<div class="widget widget_tag_cloud" id="tag_cloud-2"><h3>Tags</h3> <div> <a title="3 topics" class="tag-score-3 tag-link-13 tag-grp-1" href="http://blog.itwarlocks.com/tag/agile/">agile</a> <a title="3 topics" class="tag-score-3 tag-link-31 tag-grp-2" href="http://blog.itwarlocks.com/tag/apache/">apache</a> <a title="2 topics" class="tag-score-2 tag-link-30 tag-grp-1" href="http://blog.itwarlocks.com/tag/authentication/">authentication</a> <a title="2 topics" class="tag-score-2 tag-link-11 tag-grp-1" href="http://blog.itwarlocks.com/tag/blog/">blog</a> <a title="1 topic" class="tag-score-1 tag-link-5 tag-grp-1" href="http://blog.itwarlocks.com/tag/development/">Development</a> <a title="1 topic" class="tag-score-1 tag-link-26 tag-grp-3" href="http://blog.itwarlocks.com/tag/economy/">economy</a> <a title="1 topic" class="tag-score-1 tag-link-21 tag-grp-1" href="http://blog.itwarlocks.com/tag/extensibility/">extensibility</a> <a title="1 topic" class="tag-score-1 tag-link-15 tag-grp-3" href="http://blog.itwarlocks.com/tag/filosophy/">filosophy</a> <a title="3 topics" class="tag-score-3 tag-link-49 tag-grp-2" href="http://blog.itwarlocks.com/tag/gnutls/">gnutls</a> <a title="1 topic" class="tag-score-1 tag-link-16 tag-grp-1" href="http://blog.itwarlocks.com/tag/gui/">GUI</a> <a title="2 topics" class="tag-score-2 tag-link-62 tag-grp-1" href="http://blog.itwarlocks.com/tag/http/">http</a> <a title="2 topics" class="tag-score-2 tag-link-63 tag-grp-1" href="http://blog.itwarlocks.com/tag/https/">https</a> <a title="1 topic" class="tag-score-1 tag-link-27 tag-grp-3" href="http://blog.itwarlocks.com/tag/humanresources/">humanresources</a> <a title="1 topic" class="tag-score-1 tag-link-28 tag-grp-1" href="http://blog.itwarlocks.com/tag/innovation/">innovation</a> <a title="2 topics" class="tag-score-2 tag-link-50 tag-grp-1" href="http://blog.itwarlocks.com/tag/javascript/">JavaScript</a> <a title="1 topic" class="tag-score-1 tag-link-17 tag-grp-3" href="http://blog.itwarlocks.com/tag/leadership/">leadership</a> <a title="2 topics" class="tag-score-2 tag-link-19 tag-grp-3" href="http://blog.itwarlocks.com/tag/management/">management</a> <a title="2 topics" class="tag-score-2 tag-link-34 tag-grp-2" href="http://blog.itwarlocks.com/tag/mod_auth/">mod_auth</a> <a title="2 topics" class="tag-score-2 tag-link-35 tag-grp-2" href="http://blog.itwarlocks.com/tag/mod_auth_script/">mod_auth_script</a> <a title="2 topics" class="tag-score-2 tag-link-32 tag-grp-2" href="http://blog.itwarlocks.com/tag/mod_dav/">mod_dav</a> <a title="3 topics" class="tag-score-3 tag-link-52 tag-grp-2" href="http://blog.itwarlocks.com/tag/mod_gnutls/">mod_gnutls</a> <a title="2 topics" class="tag-score-2 tag-link-64 tag-grp-2" href="http://blog.itwarlocks.com/tag/mod_ssl/">mod_ssl</a> <a title="2 topics" class="tag-score-2 tag-link-36 tag-grp-1" href="http://blog.itwarlocks.com/tag/office/">office</a> <a title="2 topics" class="tag-score-2 tag-link-68 tag-grp-1" href="http://blog.itwarlocks.com/tag/open-source/">open source</a> <a title="3 topics" class="tag-score-3 tag-link-53 tag-grp-1" href="http://blog.itwarlocks.com/tag/openssl/">openssl</a> <a title="1 topic" class="tag-score-1 tag-link-24 tag-grp-3" href="http://blog.itwarlocks.com/tag/organisation/">organisation</a> <a title="3 topics" class="tag-score-3 tag-link-29 tag-grp-2" href="http://blog.itwarlocks.com/tag/php/">php</a> <a title="1 topic" class="tag-score-1 tag-link-9 tag-grp-1" href="http://blog.itwarlocks.com/tag/principles/">Principles</a> <a title="2 topics" class="tag-score-2 tag-link-25 tag-grp-1" href="http://blog.itwarlocks.com/tag/roi/">roi</a> <a title="1 topic" class="tag-score-1 tag-link-18 tag-grp-1" href="http://blog.itwarlocks.com/tag/scm/">SCM</a> <a title="1 topic" class="tag-score-1 tag-link-14 tag-grp-1" href="http://blog.itwarlocks.com/tag/scrum/">scrum</a> <a title="1 topic" class="tag-score-1 tag-link-12 tag-grp-1" href="http://blog.itwarlocks.com/tag/software/">software</a> <a title="3 topics" class="tag-score-3 tag-link-56 tag-grp-2" href="http://blog.itwarlocks.com/tag/ssl/">ssl</a> <a title="1 topic" class="tag-score-1 tag-link-20 tag-grp-3" href="http://blog.itwarlocks.com/tag/testing/">testing</a> <a title="1 topic" class="tag-score-1 tag-link-23 tag-grp-1" href="http://blog.itwarlocks.com/tag/thinktank/">thinktank</a> <a title="2 topics" class="tag-score-2 tag-link-65 tag-grp-2" href="http://blog.itwarlocks.com/tag/tls/">TLS</a> <a title="3 topics" class="tag-score-3 tag-link-57 tag-grp-2" href="http://blog.itwarlocks.com/tag/ubuntu/">ubuntu</a> <a title="2 topics" class="tag-score-2 tag-link-39 tag-grp-1" href="http://blog.itwarlocks.com/tag/vba/">vba</a> <a title="2 topics" class="tag-score-2 tag-link-66 tag-grp-1" href="http://blog.itwarlocks.com/tag/virtual-hosting/">Virtual Hosting</a> <a title="2 topics" class="tag-score-2 tag-link-38 tag-grp-1" href="http://blog.itwarlocks.com/tag/visualbasic/">visualbasic</a> <a title="3 topics" class="tag-score-3 tag-link-33 tag-grp-2" href="http://blog.itwarlocks.com/tag/webdav/">WebDAV</a> <a title="1 topic" class="tag-score-1 tag-link-40 tag-grp-1" href="http://blog.itwarlocks.com/tag/windows/">windows</a> <a title="2 topics" class="tag-score-2 tag-link-37 tag-grp-1" href="http://blog.itwarlocks.com/tag/word/">word</a> <a title="2 topics" class="tag-score-2 tag-link-86 tag-grp-2" href="http://blog.itwarlocks.com/tag/wordpress/">wordpress</a> <a title="2 topics" class="tag-score-2 tag-link-60 tag-grp-2" href="http://blog.itwarlocks.com/tag/zimbra/">zimbra</a> </div> </div>
The styling
Using CSS3 techniques like transform and transition (-webkit-transform, -webkit-transition, -moz-transform) you can easily get the tags to change then moused over.
/* Generic styles */
body {
font-family: Arial, Helvetica, Tahoma, sans-serif;
}
a {
color: #2970A6;
}
/* Wordpress widget style */
.widget {
padding: 10px 15px 16px;
width: 400px;
border: 1px solid #C0C0C0;
}
/* Pretty tag cloud */
.widget_tag_cloud a {
/* Transform is only applied to block elements, inlineblock preserves the layout: */
display: inline-block;
text-decoration: none;
/* Animate the transitions for color, background and transform: */
-webkit-transition: color,background,-webkit-transform 1s,1s,0.5s ease-out;
-moz-transition: color,background 1s ease-out;
}
.widget_tag_cloud a:hover {
background: #808080;
color: #FFFFFF;
/*font-size: 22pt;*/
padding: 0.5em;
margin: -0.5em;
opacity: 0.7;
-webkit-border-radius: 0.5em;
-moz-border-radius: 0.5em;
}
/* Tag score determins size.
* We want the mouse over size to be the same,
* so different scales for each.
*/
a.tag-score-1 {
font-size: 0.8em;
}
a.tag-score-1:hover {
-webkit-transform: scale(2.5) !important; /* 0.8 x 2.5 = 2.0 */
-moz-transform: scale(2.5) !important;
}
a.tag-score-2 {
font-size: 1.25em;
}
a.tag-score-2:hover {
-webkit-transform: scale(1.6) !important; /* 1.25 x 1.6 = 2.0 */
-moz-transform: scale(1.6) !important;
}
a.tag-score-3 {
font-size: 2em;
}
a.tag-score-3:hover {
-webkit-transform: scale(1) !important; /* 2.0 x 1.0 = 2.0 */
-moz-transform: scale(1) !important;
}
/* Tag groups determine colour. */
a.tag-grp-1 {
color: #2970A6;
}
a.tag-grp-2 {
color: #5FC159;
}
a.tag-grp-3 {
color: #F6872B;
}
/* Some randomly chosen tags to rotate. */
.tag-link-21,
.tag-link-35,
.tag-link-24,
.tag-link-68 {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
}
The result
- Pretty tag cloud, stage 1
(Only works perfectly in Webkit; Safari, Chrome and partially in Gecko; Mozilla, Firefox.)
Next step
As can be seen, the layout of the tags is not right. This cannot be done with CSS, so this is where I’ll be using some jQuery in the next step. The biggest challenges will be the algorithm and font-size/letter calculations in the browser.
Categories: Development
