<div id="photo_stack">
	<img id="photo1" src="images/photostack1.jpg" alt="Alt text goes here..." />
	<img id="photo2" src="images/photostack2.jpg" alt="Alt text goes here..." />
	<img id="photo3" src="images/photostack3.jpg" alt="Alt text goes here..." />
</div>

You will then need some simple CSS to style and position the images in a stack. We will be using jQuery to alter the z-index values of each image once the animation has completed, so we will start by giving each image a high z-index value. You will also need to setup the speed and easing functions for the transitions.

#photo_stack img {
	position: absolute;
	border: 10px solid #FFF;
	box-shadow: 2px 2px 8px rgba(0,0,0,0.5);
	-moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.5);
	-webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.5);
	z-index: 9999;

	/* setup transition speed and easing */
	-moz-transition: all 0.2s ease; /* Firefox */
	-webkit-transition: all 0.2s ease; /* WebKit */
	-o-transition: all 0.2s ease; /* Opera */
	transition: all 0.2s ease; /* Standard */

}
#photo_stack #photo1 {
	top: 0;
	left: 100px;
}
#photo_stack #photo2 {
	top: 12px;
	left: 55px;
}
#photo_stack #photo3 {
	top: 27px;
	left: 50px;
}

Once this is complete you can add the CSS to create the keyframe animation, which will take the image at the top of the stack and place it at the bottom of the photo stack.

@-webkit-keyframes shuffle {
	0% {
		margin-left: 0px;
	}
	50% {
		margin-left: 450px;
		-webkit-transform: scale(0.9);
		-moz-transform: scale(0.9);
		transform: scale(0.9);
	}
	100% {
		margin-left: 0px;
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		transform: scale(1);
	}
}
#photo_stack .animate {
	-webkit-animation-name: shuffle;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
}

What this is basically doing, is running the keyframe animation called ’shuffle’ once and for a duration of 1 second. The animation itself is moving the image 450px to the right of the stack, scaling down to give an impression of depth, and then moving it back to where it’s original position. Note that this will only happen when the image is assigned the ‘animate’ class.

Okay, so you now have a cool animation effect, but nothing triggers it and the image does not go to the bottom of the stack: Enter jquery. What jquery will do, is trigger the animation by assigning the ‘animate’ class to the image on the top of the stack, removing it once the animation is complete.

$imgs = $("#photo_stack img");
$imgCount = $imgs.length;
$curr_index = 0;
$imgs.last().addClass('current'); /* Set the image at top of stack to current */

$("#photo_stack")
	.delegate('img', 'click', function() {
		$this = $(this);

		/* If the image is at the top of the stack */
		if ($this.hasClass('current')) {
			/* Work out new z-index value */
			$zi = $this.css('zIndex') - $imgCount;

			/* Trigger animation */
			$this.addClass('animate');

			/* Assign new z-index value then stop animation after complete */
			setTimeout(function() { $this.css('zIndex', $zi); }, 200);
			setTimeout(function() { $this.removeClass('animate'); }, 1000);

			/* Set next image to current */
			$this.removeClass('current');
			if ($this.index() == 0) {
				$imgs.last().addClass('current');
			} else {
				$imgs.eq($this.index()-1).addClass('current');
			}
		}
	})

You will now have some images in a stack that you can click on and they will be animated and placed to the bottom of the stack. Now it is time to use the rotation transition to make the photo stack look a little more realistic. I used CSS classes to rotate the images somewhere between -4 and 4 degrees and used jQuery to randomly assign one of those classes to each image when the DOM has loaded. Then I just added a CSS rule to rotate the image to 0 degrees on hover.

#photo_stack .deg1 {
	-webkit-transform: rotate(1deg);
   	-moz-transform: rotate(1deg);
   	transform: rotate(1deg);
}
#photo_stack .deg2 {
	-webkit-transform: rotate(2deg);
   	-moz-transform: rotate(2deg);
   	transform: rotate(2deg);
}
#photo_stack .deg3 {
	-webkit-transform: rotate(3deg);
   	-moz-transform: rotate(3deg);
   	transform: rotate(3deg);
}
#photo_stack .deg4 {
	-webkit-transform: rotate(4deg);
   	-moz-transform: rotate(4deg);
   	transform: rotate(4deg);
}
#photo_stack .deg1neg {
	-webkit-transform: rotate(-1deg);
   	-moz-transform: rotate(-1deg);
   	transform: rotate(-1deg);
}
#photo_stack .deg2neg {
	-webkit-transform: rotate(-2deg);
   	-moz-transform: rotate(-2deg);
   	transform: rotate(-2deg);
}
#photo_stack .deg3neg {
	-webkit-transform: rotate(-3deg);
   	-moz-transform: rotate(-3deg);
   	transform: rotate(-3deg);
}
#photo_stack .deg4neg {
	-webkit-transform: rotate(-4deg);
   	-moz-transform: rotate(-4deg);
   	transform: rotate(-4deg);
}
#photo_stack .hover {
	-webkit-transform: rotate(0deg);
   	-moz-transform: rotate(0deg);
   	transform: rotate(0deg);
	cursor: pointer;
}

I chose to use this approach, as it means that you can have any number of images in the stack, and they will be randomly rotated. If you wanted, you could just assign a specific angle to each photo in the stack using each images ID for complete control.

The full code for the animated photo stack can be found on the demo page. It works best in the latest version of Chrome or Safari. Firefox works but without the animation and I did not even bother checking Internet Explorer – it always spoils the party!

Unfortunately, this doesn’t work in IE6+7 or Firefox 2. But fear not, these can be addressed (at the expense of a stylesheet that no longer validates). Here is the code:

h3 span {
	width: 16px;
	height: 16px;
	overflow: hidden;
	text-indent: -9999em;
	background: url(/img/secure_lock_icon.png) no-repeat 0 0;
	display: -moz-inline-stack;	/* Get FF2 to play nicely */
        display: inline-block;	/* Modern browsers get this */
	vertical-align: top;

	/* these go in your IE specific stylesheet to make it play fairly as well */
	zoom: 1;
        display: inline;
}

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