I am a big fan of progressive enhancement, but a lot of clients still use IE6, and trying to tell them that they will only get the nice design and typography if they upgrade their browser just isn’t a realistic option. This is why I see it as a useful resource for the future. There is also the issue of reliability. Even the biggest and best sites have down time every now and then. Trying to explain this “bug” to a client will be a right pain.

On a positive note, this is a step in the right direction when it comes to using fonts legally on a website. It will help keep designers happy, as they will be able to use all the nice fonts and it will keep the font creators themselves happy, as they will get the credit and return they deserve.

It should also be said that the service is incredibly easy to use. Sign-up, choose your fonts, set your CSS hooks and copy-and-paste the supplied Javascript into the head of your HTML document. That is literally it!

I wait with eagerness for the first release of Font Deck to see how it compares to TypeKit!

I started with a simple ordered list, which contained the text values which would represent the height of each bar on the chart. there are wrapped in a span which we will require in order to style this correctly in the CSS.

<div id="chart">
<ol>
	<li id="green_bar">450</li>
	<li id="yellow_bar">600</li>
	<li id="red_bar">300</li>
</ol>
</div>

Step 2: The CSS

I then used some background images to create the graph and the 3D bars. The CSS specifies how high each bar should be and adds the background images. (This can be quite tricky as it requires a little bit of arithmetic to ensure that the bar is the correct height and the scales are consistent).

#chart {
	background: #FFF url('../images/chart_bg.png') no-repeat 0 0;
	width: 636px;
	height: 420px;
}
#chart ol {
	margin: 0;
	padding: 0;
	list-style-type: none;
	position: relative;
	height: 420px;
	width: 636px;
	overflow: hidden;
}
#chart ol li {
	text-indent: -9999em;
	width: 140px;
	position: absolute;
	bottom: 0;
	background-repeat: no-repeat;
	background-position: -140px 0;
	background-color: transparent;
	padding: 38px 0 0 0;
}
#green_bar {
	height: 150px;
	background-image: url('../images/green_bar_top.png');
	left: 80px;
}
#green_bar span {
	background: transparent url('../images/green_bar.png') no-repeat left bottom;
	display: block;
	height: 150px;
}
#yellow_bar {
	height: 200px;
	background-image: url('../images/yellow_bar_top.png');
	left: 260px;
}
#yellow_bar span {
	background: transparent url('../images/yellow_bar.png') no-repeat left bottom;
	display: block;
	height: 200px;
}
#red_bar {
	height: 100px;
	background-image: url('../images/red_bar_top.png');
	left: 440px;
}
#red_bar span {
	background: transparent url('../images/red_bar.png') no-repeat left bottom;
	display: block;
	height: 100px;
}

Step 3: Adding some jQuery animation

At this point we have a fairly nice looking three dimensional graph using only CSS and some markup: now to add the animation! All we need to do is position the bars below the x-axis using jQuery, and then add the animation that will slide them in. It’s pretty simple, but looks pretty nice. It does have it’s drawbacks, as the height of the highest bar needs to be known so that the chart background image can be created. Any dynamic graphs that are created on-the-fly will be difficult to create, but for one-off static graphs, this is a neat little effect.

$(function() {
  // hide the bars to begin with
	$('#chart ol li').each(function() {
		$(this).css({'bottom': '-' + $(this).height() + 'px'});
		$(this).css({'background-position': '0 0'});
	});
  // animate the bars position to show on the graph
	$('<p>Show_results</p>').click(function() {
		$('#chart ol li').each(function() {
			$(this)
			.css({'background-position': '-140px 0'})
			.animate({
				bottom: '0px'
			}, 500);
		});
		return false;
	}).appendTo('body');
});

Step 1: The Markup

As with any navigation menu, I have started off with a simple list. Each list item needs a link inside it, and each of these links needs a span inside it. The span is required so that we can add the transparent cut-out text image on-top of the gradient background colour. Additionally, I have given each list item an id, as we need these hooks for the CSS and jQuery animation.

<ol>
  <li id="home">home</li>
  <li id="about">about</li>
  <li id="blog">blog</li>
  <li id="contact">contact</li>
</ol>

Step 2: The CSS

The CSS is actually straight forward: firstly, we add the gradient background image to the link, and then add the cut-out text image to the span nested inside of it. You will notice I have used the iepngfix hack to get the transparencies working in IE6 (Although without further workarounds, I believe the link won’t be clickable…meh!). I have included a hover state for these links, so that without Javascript, the color will still change, you just won’t get the fading animation.

#navigation ol li {
	list-style-type: none;
	padding: 0;
	margin: 0;
	color: #FFF;
	width: 141px;
	float: left;
	padding: 0;
	height: 54px;
}
#navigation ol li a {
	text-decoration: none;
	display: block;
	width: 100%;
	height: 54px;
	padding: 0;
	margin: 0;
	color: #FFF;
	text-indent: -9999em;
	background-color: #FFF;
	background-position: 0 0;
	background-repeat: repeat-x;
	background-image: url('../images/nav_gradient.png');
}
#navigation ol li a:hover {
	background-position: 0 -162px;
}
#navigation ol li a span {
	display: block;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: 0 0;
	height: 54px;
	width: 100%;
	behavior: url('../js/iepngfix.htc');
}
#navigation ol li#home a span {
	background-image: url('../images/home_tab.png');
}
#navigation ol li#about a span {
	background-image: url('../images/about_tab.png');
}
#navigation ol li#blog a span {
	background-image: url('../images/blog_tab.png');
}
#navigation ol li#contact a span {
	background-image: url('../images/contact_tab.png');
	width: 141px;
}

Step 3: The jQuery Animation

This is incredibly simple: all you need to do is define a hover function for each link, and then animate the background position when the mouse is moved over and out of the link. Note: In order to get background animations to work, you will need to download and include the background position plugin.

$(function() {
	$('#navigation ol li a')
	.css({backgroundPosition: '0 0'})
	.hover(
		function () {
			$(this).stop().animate(
				{backgroundPosition: '(0 -162px)'},
				{duration: 500}
			);
		},
		function () {
			$(this).stop().animate(
				{backgroundPosition: '(0 0)'},
				{duration: 400}
			);
		}
	);
});

<ol>
 <li>
  54%
  Option 1
 </li>
 <li>
  22%
  Option 2
 </li>
 <li>
  14%
  Option 3
 </li>
 <li class="last">
  10%
  Option 4
 </li>
</ol>

Now that we have enough hooks, we can apply our style to achieve this graphical representation of the poll results. These pages are generated by a CMS, and the percentage values are variables populated for a database. Therefore, to achieve this, inline styles are needed to set the graph bars to the appropriate widths. It is a bit annoying that you can’t completely separate the presentation from the mark-up, but I think it is a small price to pay, for a nice effect.

#pollWrapper {
 width: 800px;
 padding: 1em 0;
 overflow: hidden;
 height: auto;
}

#pollWrapper ol {
 list-style-type: none;
 margin: 0;
 padding: 2px;
 position: relative;
 border: 1px solid #CCC;
}

#pollWrapper ol li {
 overflow: hidden;   /* clear floats in modern browsers */
 zoom: 1;    /* clear floats in IE6 - put in external stylesheet */
 font-size: 0.75em;
 margin: 0 0 2px 0;
}

#pollWrapper ol li.last {
 margin: 0;
}

#pollWrapper ol li strong {
 width: 200px;
 margin-right: 10px;
 padding: 1px;
 float: left;
 display: inline;
 background: #FAFAFA;
}

#pollWrapper ol li em {
 display: block;
 background: #CCC;
 color: #333;
 text-indent: 2px;
}

#pollWrapper ol li span {
 width: 582px;
 float: left;
}

View demo

<ol>
    <li>
        <a id="red">Red Square
            <img src="images/red_square.png" alt="Red Square" />
        </a></li>
    <li>
        <a id="yellow">Yellow Circle
            <img src="images/yellow_circle.png" alt="Yellow Square" />
        </a></li>
    <li>
        <a id="green">Green Triangle
            <img src="images/green_triangle.png" alt="Green Triangle" />
        </a></li>
    <li>
        <a id="blue">Blue Hexagon
            <img src="images/blue_hexagon.png" alt="Blue Hexagon" />
        </a></li>
</ol>

And the CSS, where the magic happens:

#linksWrapper ol {
	list-style-type: none;
	margin: 0;
	padding: 0;
	position: relative;
}
#linksWrapper ol li {
	width: 180px;
}
#linksWrapper ol li a {
	text-decoration: none;
	padding: 0.25em 10px;
	display: block;
	color: #000;
	width: 160px;
}
#linksWrapper ol li a img {
	position: absolute;
	top: 0;
	left: 180px;
	z-index: 100;
	border: none;
}
#linksWrapper ol li a#red img {
	z-index: 500;
}
#linksWrapper ol li a#yellow:hover {
	background-color: #FFFC00;
	color: #000;
}
#linksWrapper ol li a#red:hover {
	background-color: #FF0000;
	color: #FFF;
}
#linksWrapper ol li a#green:hover {
	background-color: #24EA44;
	color: #FFF;
}
#linksWrapper ol li a#blue:hover {
	background-color: #2B99F6;
	color: #FFF;
}
#linksWrapper ol li a:hover img {
	z-index: 1000;
}

View demo