64x64 icon dark hosting
Choose a hosting plan here and get a free year's subscription to Tuts+ (worth $180).

Tagtastic Tag Cloud with CSS Transformations


Start a hosting plan from $3.92/mo and get a free year on Tuts+ (normally $180)

This post is part of a series called Bringing Premium Pixels to Life.
Quick Tip: Create a Rating System With CSS, Web fonts and Sprites
Styling Dark Select Dropdown With Dropkick.js

Hey guys, today we'll be creating Premium Pixels' Tagtastic Tag Cloud. As an experiment in alternative approaches, we'll create the tags using gradients, shadows and (most importantly) CSS transforms, which will form the point of each tag. After completion we'll even take a step further and cater for IE.

We've covered tags before on Webdesigntuts+, but on this occasion we're going to examine an alternative method of creating all the composite bits and pieces. There may be sharper ways of creating the effect, but our example will refrain from images, use very clean markup and some unusual styling. Let's get stuck in!

Step 1: HTML5 Base Markup

Let's start off by throwing in some basic markup, including the familiar HTML5 doctype. We'll also refer to our stylesheet within the head of our document.

Step 2: Adding Some Containers

For the purpose of this tutorial we'll create a wrapper/container to hold our tags. You will most likely need something similiar should you use these in, for example, a blog sidebar.

For ours, we'll simply create a div with a class of wrapper, apply a width of 340px and a margin of 50px auto to center the wrapper on the page. I've added 50px instead of 0 just to add a bit of margin top so our tags don't touch the top of the browser window. While throwing in this CSS we'll add some styling for the body (such as a background image) and apply a reset.

Step 3: Creating a Tag with Some HTML

I've structured these tags very simply; all we'll be using is an anchor tag (a logical choice as these will likely act as links to somewhere or something). For this tutorial I've given it a class of "tag" but this can be changed to whatever you like.

Step 4: Tag Styling

Right, on to the next part! We'll now make a start on styling the tag - there's quite a bunch of code here but don't let that confuse you, I'll explain whats going on.

I've first added some basic stuff here;

  • Floats
  • Margins
  • Positioning - Relative
  • Text-decoration - none

Next we've defined some font settings, size, family and weight, followed by a color and a text-shadow. After that we've applied some padding, using ems so that everything is sized relative to the body font size, or the browser font size. Next, a simple border, though we haven't applied one to the left. The ems have popped up again! This time we'll apply them to border-radius but only the top right and bottom right corners. Okay are you still awake? There's more.. next we'll use some CSS3 gradients (I've gone ahead and used the neat Gradient app to calculate the values). Final part is some box shadows, an inset and drop shadow. Remember those prefixes!

Step 5: The Arrow

Okay we've completed the main part of the tag, the next part is to create the arrow. To add this we'll use the :before pseudo element. We'll also experiment with some advanced techniques here from CSS; transformations. Creating these arrows involved a lot of trial and error. I had to try different widths and heights along with positioning of top and bottom to get it as perfect as possible! Any feedback is therefore very welcome..

We've used the same background gradient as previously but with one minor change: because we'll be rotating the square we're about to make, we'll also need to rotate the gradient so it matches up with the main part of the tag. Gradient app was helpful in letting me change the direction of the gradient. The next part is to create some borders, on the left and bottom. All that's left with regard to the arrow is to add a border-radius to smoothen off the point and to finally apply our transformations. We'll rotate the square we've made 45 degrees so it looks like an arrow. We've used transform:45; along with the prefixed ones.

You should now have something similar to the following; Note I've zoomed in so you can see where the arrow connects to the main part, this is barely notiticable when viewed at normal size.

Arrow and base

Step 6: Tag Hole

The last part to complete our tag is to create the little hole on it. Here we'll use a pseudo again, but this time, the :after element. What we've done to create the hole is rather simple. We've defined a width and height in ems so it'll grow smoothly. Next we've added a large border radius which will create a circle with a border to outline it. Following this we've added a drop shadow which is similiar to the text-shadow. Finally we've positioned it (while using ems).

Hole created

Step 7: Adding Some Hover Styles

To make our tags even more awesome we'll add some hover styles. We'll need to add this to the main part of the tag and the arrow (while remembering to rotate the gradient for the arrow). We've also changed the border color on both.

Step 8: Catering for IE

If you'd still like to show your tags in full glory for IE users you'll need to take a different approach towards these tags, beginning by creating an IE specific stylesheet. I'll explain why.. Firstly, a lot of our CSS3 effects won't work in versions earlier than IE9 (only a couple work in IE9 as it is), but the main problem here is transforms which will not work. To cater for IE users, we'll edit our code a bit. We'll start off by changing our HTML first, by replacing the wrapper div and everything inside it with:

IE Images

We'll use an anchor tag again but with 3 spans inside it; we'll need one to create the arrow, the main part and the end which has the border radius.

Step 9: Images for our IE Version

To ensure our tags will work in IE, we'll have to use images. Start off by deleting everything beneath the .wrapper styles, everything tag related! You'll now need to paste in the following snippet. We're simply applying some background images here, but also repeating the text background on the x-axis as the text could be any length! Even Supercalafragalisticexpialadoshus!


Well thats it! That's another tutorial complete and it looks good! We've taken these tagtastic tags and created them with CSS while catering for IE at the same time. These tags could be used for all sorts of things - go ahead and use them in a sidebar, blog, whatever you like!


I hope you liked this tutorial, thanks for reading.