Create and Code Your Own Juicy Tag Cloud!

Today we’re firing it up with a tutorial on how to design and code your own juicy tag cloud using Photoshop, CSS, and a few tiny images! We’ll be using the age-old sliding doors technique, but we’ll include some advanced CSS selector methods towards the end in case you want to push the envelope and use this inside WordPress. Ready, set, go!

The Written Tutorial

A little bit of polish in the right spots can really spice up an otherwise standard page design. Today, we’re going to walk through how to create your own custom variation of the “tag cloud” element that you can find in pretty much any blogging system nowadays.

We’ll quickly skim through the design (it’s easy peezy), and then dig into the CSS that makes this all come together. Use it in your own projects, drop it into a personal blog, it’s totally up to you… let’s dive in!

Step 01: Design The Tags

The CSS purists in the audience can cringe at this point because we’re going to open up Photoshop. Why? Because we want to create a completely custom tag design. Can this particular tag that we’ll be using today be achieved in CSS? Probably – I’m sure some CSS ninjas out there will be quick to point out that these are just basic shapes… but what if you wanted to add texture? Or a completely different shape (scalloped edges anyone)?

Aside from the browser headaches of trying to get this working with CSS alone, the bottom line is that it’s good to know how to use images and CSS together in unison, so that’s precisely what we’ll be doing.

Go ahead and fire up Photoshop. Open a new document sized 71px by 29px.

The width doesn’t actually matter much here… but the height is going to be something you’ll want to remember.

Next, let’s draw a rounded rectangle on our document with a 2px radius. Leave a bit of room for a drop shadow later on… in our case, I’ve left 2px at the bottom and sides.

Now it’s time to create our custom shape. We’ll be using Photoshop’s Add Point and Convert Point tools. There’s not much to this beyond just tinkering with the points until you’ve got the shape that you want, so play around a bit. Here’s ours:

We need a little hole in our tag though… you know, so people can loop a virtual string through it. Ok, maybe not, but it adds a little extra flare for us that wouldn’t be possible with CSS. Use the elliptical marquee tool and draw a circular selection (hold the Shift key while you draw to keep it perfect).

Once you have your selection made, select the inverse of the selection (Select > Inverse) and turn it into a vector mask over your tag shape using the Add Layer Mask button at the bottom of the layer inspector.

For the sake of brevity (we do want to get to the coding part, right?!), let’s skim through the layer styles here. You can add your own adjustments, but here’s what ours look like:

The end result should look like this:

You’ll notice in the PSD (inside the Download folder for this tutorial) that I’ve also added in our text. Feel free to do the same in case you need to use this inside any design mockups.

Note: You can reverse the orientation of the tag easily on your own. We’ll actually show you how to create the left-facing and right-facing tag in the coding phase.

Step 02: Slicing and Markup

Woot! So we have our tag designed… but how are we going to use it in an actual web page? We’ll start by slicing up our tag into three pieces:

1. The left side
2. The center gradient
3. The right side

Save these all as PNG graphics to preserve the transparency and store them inside a folder called “images”.

Now we need to create our basic markup. We’re going to start this out using a simple, logical approach using layers of DIVs, but as with all things code-related, we’ll be able to clean this up (and reduce the amount of code required) in the later steps.

Here’s our basic markup for each tag:

	<div class="tag tag-left">
		<div class="left"></div>
		<div class="center"><a href="#">Design</a></div>
		<div class="right"></div>
	</div>

Let’s review this quickly: We essentially have a main tag wrapper DIV (.tag), with three nested DIVs:

• Left DIV (for our left-side graphic)
• Center DIV (for our tag text and background gradient)
• Right DIV (for our right-side graphic)

You can go ahead and repeat that block of code a few times to test out multiple tags stacked up next to each other.

Now it’s time to add our CSS.

Step 03: The Basic CSS

We’ll start the CSS by applying some basic rules to each of our divs. I’ll show you the code for each, then explain what it’s doing:

.tag {
	font-size: 11pt;
	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.4);
	float: left;  /* Makes each tag stay together in one piece */
	margin: 5px;
}
.tag .center{
    background: url("images/gradient.png") repeat-x scroll left top transparent;
    float: left;
    height: 29px;  /* Same as your image height */
    width: auto;
    padding: 0px 6px;  /* Give the text a little room to breathe */
}
.tag .center a{
	vertical-align: middle; /* Important for fitting the text in perfectly */
	line-height: 21pt; /* Important for fitting the text in perfectly */
	color: #0f2d39;
	text-decoration: none;
}

This block of code sets up the element that will wrap around our tag; Note that we’re adding some type rules here, a simple float, and a margin between each tag to space them out.

The second two rules in the above CSS cover the center portion of the tag – establishing the background gradient and some spacing.

At this point, you should have some tags that look like this:

Now let’s look add some styling for the left and right side elements.

.tag-left .left{
    background: url("images/tagleft_left.png") no-repeat scroll left top transparent;
    display: block;
    float: left;
    height: 29px;  /* Same as your image height */
    width: 15px;  /* Same as your image width */
}
.tag-left .right{
    background: url("images/tagleft_right.png") no-repeat scroll right top transparent;
    display: block;
    float: left;
    height: 29px;  /* Same as your image height */
    width: 4px;  /* Same as your image width */
}

The above block of code does three primary things:

1. Targets the background images.
2. Determines the height/width of the left and right sides of the tag. This should match the size of your images ;)
3. Tells the elements to float, which makes them line up properly.

Now your tags should be pretty close to complete:

But what if we want to include another type of tag… say one that faces the opposite direction? That’s where the “tag-left” and “tag-right” selectors come into play. By adding these at the top level, we can actually add just a few more rules to our CSS to allow for a completely different tag:

.tag-right .left{
    background: url("images/tagright_left.png") no-repeat scroll left top transparent;
    display: block;
    float: left;
    height: 29px;  /* Same as your image height */
    width: 4px;  /* Same as your image width */
}
.tag-right .right{
    background: url("images/tagright_right.png") no-repeat scroll right top transparent;
    display: block;
    float: left;
    height: 29px;  /* Same as your image height */
    width: 16px;  /* Same as your image width */
}

Which should give you the proper “right-tag” style:

Notice the right-facing tag on the top right of the tag cloud.

Done! Well, sorta… to be honest, this is a really heavy handed way of handling this effect. In the next step, we’ll take you into some more advanced CSS selectors for a more graceful approach.

Google Fonts Note: You may have noticed that I’m using a custom font here (Droid Sans). Adding your own custom font is easy, just visit the Google Fonts site, find the font that you like, and add in the embed code and CSS rule for the font.

The great thing about the Google fonts (or anything like it) is that you can actually apply most CSS font styling to the text… this means that we can use attributes like text-shadow to create the subtle light effect.

Step 04: The Advanced CSS

Anyone who’s been coding for any length of time will tell you there is ALWAYS a way to improve a piece of code. That’s exactly what we’ll be doing in this last step.

Let’s start by reviewing what’s ungraceful about the previous approach.

• Too much markup! We shouldn’t need to use four different DIV elements to achieve this effect.
• Heavy handed CSS! It works, sure, but there are more graceful ways of writing the CSS so that it doesn’t actually need the extra markup.
• It’s not flexible! Requiring lots of markup and gnarly CSS means that it won’t work (easily) within a CMS like WordPress

Here’s another approach using CSS :before and :after selectors to lighten up the load.

Let’s start by looking at the original CSS in it’s entirety, and then re-write it using our selectors:

The Original CSS

/* Generic Tag Styling / Typography +++++++++++++++++++++++++++++++++++++++++++++++++++ */
.tag {
	font-size: 11pt;
	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.4);
	float: left;  /* Makes each tag stay together in one piece */
	margin: 5px;
}
.tag .center{
    background: url("images/gradient.png") repeat-x scroll left top transparent;
    float: left;
    height: 29px;  /* Same as your image height */
    width: auto;
    padding: 0px 6px;  /* Give the text a little room to breathe */
}
.tag .center a{
	vertical-align: middle; /* Important for fitting the text in perfectly */
	line-height: 21pt; /* Important for fitting the text in perfectly */
	color: #0f2d39;
	text-decoration: none;
}
/* Left-tag Rules ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.tag-left .left{
    background: url("images/tagleft_left.png") no-repeat scroll left top transparent;
    display: block;
    float: left;
    height: 29px;  /* Same as your image height */
    width: 15px;  /* Same as your image width */
}
.tag-left .right{
    background: url("images/tagleft_right.png") no-repeat scroll right top transparent;
    display: block;
    float: left;
    height: 29px;  /* Same as your image height */
    width: 4px;  /* Same as your image width */
}
/* Right-tag Rules +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.tag-right .left{
    background: url("images/tagright_left.png") no-repeat scroll left top transparent;
    display: block;
    float: left;
    height: 29px;  /* Same as your image height */
    width: 4px;  /* Same as your image width */
}
.tag-right .right{
    background: url("images/tagright_right.png") no-repeat scroll right top transparent;
    display: block;
    float: left;
    height: 29px;  /* Same as your image height */
    width: 16px;  /* Same as your image width */
}

The New CSS

/* Generic Tag Styling / Typography +++++++++++++++++++++++++++++++++++++++++++++++++++ */
.tag {
	float: left;
	margin: 5px;
    height: 29px;  /* Same as your image height */
    width: auto;
}
.tag a{
    background: url("images/gradient.png") repeat-x scroll left top transparent;
    float: left;
    height: 29px;
    padding: 5px 6px;
    color: #0F2D39;
    font-size: 11pt;
    text-decoration: none;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.4);
}
.tag:before{
	content: '';
    background: url("images/tagleft_left.png") no-repeat scroll 0 0 transparent;
    display: block;
    float: left;
    height: 29px;  /* Same as your image height */
    width: 15px;  /* Same as your image width */
}
.tag:after{
	content: '';
    background: url("images/tagleft_right.png") no-repeat scroll 0 0 transparent;
    display: block;
    float: right;
    height: 29px;  /* Same as your image height */
    width: 4px;  /* Same as your image width */
}
/* Flip-tag Rules +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.tag.flip:before{
	content: '';
    background: url("images/tagright_left.png") no-repeat scroll left top transparent;
    display: block;
    float: left;
    height: 29px;  /* Same as your image height */
    width: 4px;  /* Same as your image width */
}
.tag.flip:after{
	content: '';
    background: url("images/tagright_right.png") no-repeat scroll right top transparent;
    display: block;
    float: right;
    height: 29px;  /* Same as your image height */
    width: 16px;  /* Same as your image width */
}

What’s different? For starters, we’ve eliminated the need for the left and right elements inside the DIV.

Here, just compare the old markup and the new markup:

Old HTML Markup

	<div class="tag tag-left">
		<div class="left"></div>
		<div class="center"><a href="#">Design</a></div>
		<div class="right"></div>
	</div>

New HTML Markup

	<span class="tag">
		<a href="#">Design</a>
	</span>

By using the :before and :after selectors, we’re able to effective inject our “sliding doors” into the markup without any extra load. The result is a much cleaner piece of markup, and one that actually works on all modern browsers! We’ve also switched from using DIV elements to simple SPAN elements (SPANs make a bit more sense in this context).

Bonus Step 01: Adding the :Hover State

So what if we want to have a hover state for our tags? It’s pretty simply actually – just add a couple new rules with the :hover selector inserted in between our class-selector and the :before and :after selectors.

For instance:

.tag:hover:before{}

That handles the selection problem – from here you can basically add your own variation of what happens upon the mouse-hover. You can do anything from change the text color, to the opacity, or even change the actual background graphics. Here’s what we used in the demo:

/* Mouse Hover Rules +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.tag a:hover{
    background: url("images/gradient_hover.png") repeat-x scroll left top transparent;
}
.tag:hover:before{
    background: url("images/tagleft_left_hover.png") no-repeat scroll 0 0 transparent;
}
.tag:hover:after{
    background: url("images/tagleft_right_hover.png") no-repeat scroll 0 0 transparent;
}
.tag.flip:hover:before{
    background: url("images/tagright_left_hover.png") no-repeat scroll left top transparent;
}
.tag.flip:hover:after{
    background: url("images/tagright_right_hover.png") no-repeat scroll right top transparent;
}

Note that swapping out the image can create a quick flicker effect the first time the images load up… there are ways of dealing with this, but that’s another tutorial ;)

Bonus Step 02: Using it Inside WordPress

Using this little trick inside WordPress is also pretty easy. Check out the WordPress Codex page on “the_tags” function that you would ordinarily use inside one of the template files… we’ll be looking to see how we can change the markup that’s used to spit out the tags.

Here’s one example of how you might turn the rendered tags into an unordered list:

<?php the_tags('<ul><li>','</li><li>','</li></ul>'); ?>

We would simply change that to match our own system:

<?php the_tags('<span class="tag">','</span><span class="tag">','</span>'); ?>

That’s it! Just include the associated CSS inside your style.css file (or whichever .css file you’re using in your theme), and you should have some awesome little custom tags ready to go!

Thanks for following along everyone :) Comments on how we can improve this or do it different are always welcome!