Advertisement

Tagtastic Tag Cloud with CSS Transformations

by
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.

<!DOCTYPE html>
<html>
	<head>

		<!--Meta tags-->
		<meta charset="utf-8">

		<!--Title-->
		<title></title>
		
		<!--Stylesheets-->
		<link rel="stylesheet" href="css/styles.css">

</head>
<body>







</body>
</html>


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.

<div class="wrapper">



</div>

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,and,address,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,input,textarea,select{background:transparent;border:0;font-size:100%;margin:0;outline:0;padding:0;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}
body {
	font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size:16px;
	background:url(../images/bg.jpg) repeat;
	-webkit-font-smoothing: antialiased;
}

.wrapper {
	max-width:340px;
	margin:50px auto;
}

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.

	<a href="#" class="tag">high resolution</a>

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!

.tag {
	float:left;
	margin:0 0 7px 20px;
	position:relative;

	font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size:0.75em;
	font-weight:bold;
	text-decoration:none;

	color:#996633;
	text-shadow:0px 1px 0px rgba(255,255,255,.4);

	padding:0.417em 0.417em 0.417em 0.917em;

	border-top:1px solid #d99d38;
	border-right:1px solid #d99d38;
	border-bottom:1px solid #d99d38;

	-webkit-border-radius:0 0.25em 0.25em 0;
	-moz-border-radius:0 0.25em 0.25em 0;
	border-radius:0 0.25em 0.25em 0;

	background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
	background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
	background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
	background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
	background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba47');

	-webkit-box-shadow:
		inset 0 1px 0 #faeaba,
		0 1px 1px rgba(0,0,0,.1);
	-moz-box-shadow:
		inset 0 1px 0 #faeaba,
		0 1px 1px rgba(0,0,0,.1);
	box-shadow:
		inset 0 1px 0 #faeaba,
		0 1px 1px rgba(0,0,0,.1);

	z-index:100;
}

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.

.tag:before {
	content:'';

	width:1.30em;
	height:1.358em;

	background-image: -webkit-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
	background-image: -moz-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
	background-image: -o-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
	background-image: -ms-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
	background-image: linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#feda71', EndColorStr='#feba47');
	
	position:absolute;
	left:-0.69em;
	top:.2em;

	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-o-transform:rotate(45deg);
	transform:rotate(45deg);

	border-left:1px solid #d99d38;
	border-bottom:1px solid #d99d38;

	-webkit-border-radius:0 0 0 0.25em;
	-moz-border-radius:0 0 0 0.25em;
	border-radius:0 0 0 0.25em;

	z-index:1;
}

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).

.tag:after {
	content:'';

	width:0.5em;
	height:0.5em;

	background:#fff;

	-webkit-border-radius:4.167em;
	-moz-border-radius:4.167em;
	border-radius:4.167em;

	border:1px solid #d99d38;

	-webkit-box-shadow:0 1px 0 #faeaba;
	-moz-box-shadow:0 1px 0 #faeaba;
	box-shadow:0 1px 0 #faeaba;

	position:absolute;
	top:0.667em;
	left:-0.083em;
	z-index:9999;
}
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.

.tag:hover {
	background-image: -webkit-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
	background-image: -moz-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
	background-image: -o-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
	background-image: -ms-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
	background-image: linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fee18d', EndColorStr='#fec86c');

	border-color:#e1b160;
}

.tag:hover:before {
	background-image: -webkit-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
	background-image: -moz-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
	background-image: -o-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
	background-image: -ms-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
	background-image: linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#fee18d', EndColorStr='#fec86c');

	border-color:#e1b160;
}

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
<div class="wrapper">

	<a href="#" class="tag">
		<span class="arrow"></span>
		<span class="text">high resolution</span>
		<span class="end"></span>
	</a>

</div>

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!

.arrow {
	width:15px;
	height:25px;
	float:left;

	background:url(../images/arrow.png) no-repeat;
}
.text {
	height:25px;
	float:left;

	padding-left:4px;
	padding-right:4px;

	background:url(../images/text.png) repeat-x;

	font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size:0.75em;
	font-weight:bold;

	color:#996633;
	text-shadow:0px 1px 0px rgba(255,255,255,.4);

	line-height:23px;
}
.end {
	width:4px;
	height:25px;
	float:left;

	background:url(../images/end.png) no-repeat;
}


.tag:hover .arrow { background-image:url(../images/arrow_hover.png); }
.tag:hover .text { background-image:url(../images/text_hover.png); }
.tag:hover .end { background-image:url(../images/end_hover.png); }


Conclusion

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!

Completed

I hope you liked this tutorial, thanks for reading.