It's been a while since I published my Pure html5 / css3 animated image captions and I thought I'd revisit the subject. The following demo is a slightly different take on the last - instead of hiding the captions and revealing them on mouseover this time I'm hiding the images and showing the captions first. The resulting animated images/captions are then animated using css3 2d and 3d transforms. Normally if you flip and element using transforms, it appears as a mirror-image, however if you use the backface-visibility property (set to hidden), the resulting element is then hidden. This is the key to the following animations.

the set-up

1) The html used is as before, a <figure> element containing an <img> and a <figcaption>, the only difference being this time I'm allowing myself to use a containing <div> that specifies the type of animation (horizontal, diagonal, vertical…).

<div class="vertical">
	<figure>
		<img src="images/joni-mitchell.png" alt="Joni Mitchell" width="200" height="200" />
		<figcaption class="orange">Joni Mitchell</figcaption>
	</figure>
</div>

2) The containing <div> has a position of relative, and from there on the <figure>, <img> and <figcaption> elements are all set to position absolute so they are all positioned on top of each other.

3) Now, the <img> tab is flipped over using a transform. Because it has a backface-visibility of hidden it is now invisible.

4) The final effect is achieved on mouseover. On mouseover, the <figure> element is flipped using a transform that is animated using a css3 transition.

5) Once it if flipped, the <img> which is now flipped back becomes visible whilst the <figcaption> which is flipped over becomes hidden.

And here's the full demo of my Animated image captions using the css backface-visibility property

I have created live editable versions of all my CSS demos on dabblet.com so that you can play with the code. The dabbler versions have slightly simplified css in that they make use of prefix-free to simplify the mark up by eliminating vendor specific prefixes.

Links to live code on dabblet.com are available for the following CSS demos:

• Six fantastic CSS3 animated image captions
• 7 Great CSS based text effects using the text-shadow property
• Cross Browser Pure CSS3 Button Demo
• CSS3 Isometric Text Demo

In the case of the Isometric Text Demo, I have reviewed my original code and eliminated the need for javascript by using the :after selector.

Here is a complete list of links to the examples:

• Animated HTML5 / CSS3 image caption - Example 1
• Animated HTML5 / CSS3 image caption - Example 2
• Animated HTML5 / CSS3 image caption - Example 3
• Animated HTML5 / CSS3 image caption - Example 4
• Animated HTML5 / CSS3 image caption - Example 5
• Animated HTML5 / CSS3 image caption - Example 6
• CSS text-shadows - Example 1
• CSS text-shadows - Example 2
• CSS text-shadows - Example 3
• CSS text-shadows - Example 4
• CSS text-shadows - Example 5
• CSS text-shadows - Example 6
• CSS text-shadows - Example 7
• Pure CSS3 buttons - Example 1
• Pure CSS3 buttons - Example 2
• Pure CSS3 buttons - Example 3
• Pure CSS3 buttons - Example 4
• CSS3 Isometric Text Demo v2

Following on from my previous CSS3 demos, here is a demo of pure CSS3 animated image captions - the kind of thing that usually involves a lot of javascript and all too often bloated markup.

In the following demo, all the examples are created using only CSS3 and the following semantic HTML5 markup for describing an image with a caption:

<figure>
	<img src="sample-image.png" width="200" height="200" alt="sample image description" />
	<figcaption>sample caption</figcaption>
</figure>

You can see the full demo here: CSS3 animated image captions →

I've been doing a lot of experimenting recently with CSS3 gradients, box shadows, transitions etc… The result is this set of buttons created entirely from CSS (no images used at all).

They have been tested using Safari 5, Firefox 5, Chrome 12 and Opera 11.5 on the Mac. Sorry if you're using any form of Internet Explorer, but as it doesn't have support for some of the CSS3 properties involved I haven't bothered even trying to see how they render.

You can see the full demo here →

1) My first creation is a transparent button using subtle gradients and box shadows. Basically it's a pure CSS3 emulation of some buttons that appear on the Apple site. The original buttons use .png graphics to create the effect.

a.transparent:link, a.transparent:visited {
	color: #fff;
	padding: 20px 40px;
	border-style: none;
	background-color: rgba(0,0,0,0);
	font: 14px/1 "Lucida Grande", Lucida, Verdana, sans-serif;
	text-shadow: #000 0 2px 2px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	display: inline-block;
}

a.transparent:hover {
	-moz-box-shadow: rgba(255,255,255,.28) 0px 1px 1px, inset rgba(0,0,0,.5) 0 1px 4px;
	-webkit-box-shadow: rgba(255,255,255,.28) 0px 1px 1px, inset rgba(0,0,0,.5) 0 1px 4px;
	box-shadow: rgba(255,255,255,.28) 0px 1px 1px, inset rgba(0,0,0,.5) 0 1px 4px;
	background-image: -moz-linear-gradient(top, rgba(0,0,0,.1) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.2) 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.1)), color-stop(30%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,.2)));
	background-image: -webkit-linear-gradient(top, rgba(0,0,0,.1) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.2) 100%);
	background-image: -o-linear-gradient(top, rgba(0,0,0,.1) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.2) 100%);
	background-image: linear-gradient(top, rgba(0,0,0,.1) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.2) 100%);
	-moz-background-clip: padding-box;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
}

a.transparent:active {
	background: rgba(0,0,0,.3);
	-moz-box-shadow: rgba(255,255,255,.28) 0px 1px 1px, inset rgba(0,0,0,.5) 0 1px 6px;
	-webkit-box-shadow: rgba(255,255,255,.28) 0px 1px 1px, inset rgba(0,0,0,.5) 0 1px 6px;
	box-shadow: rgba(255,255,255,.28) 0px 1px 1px, inset rgba(0,0,0,.5) 0 1px 6px;
}

2) In a previous post I showed how to create a 3D text effect using CSS text shadows. The lettering appears to stand up from a flat surface. I started with this effect, and added a glow to the hover state and made the text shift down for the active state.

a.text:link, a.text:visited {
	color: #fff;
	text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
	font: 60px/60px 'ChunkFiveRegular';
	display: inline-block;
}

a.text:hover {
	text-shadow: 0 0 5px #63fdfe, 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
}

a.text:active {
	text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 5px 7px #001135;
	margin-top: 4px;
	line-height: 56px;
	color: #dcdcdc;
}

3) The next set of buttons is an exact copy of the .png buttons that I designed when I coded this blog, except that obviously this time no images whatsoever are envolved. The buttons are created entirely with CSS3.

a.pager1:link, a.pager1:visited {
	font: 14px/26px MisoRegular;
	letter-spacing: 1px;
	text-shadow: #1C9328 0 -1px 0;
	color: #fff;
	background-color: #444;
	display: inline-block;
	margin-right: 1px;
	padding-right: 15px;
	padding-left: 15px;
	-moz-border-radius: 13px 0 0 13px;
	-webkit-border-radius: 13px 0 0 13px;
	border-radius: 13px 0 0 13px;
	background: -moz-linear-gradient(top, rgba(135,185,0,1) 0%, rgba(51,134,8,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(135,185,0,1)), color-stop(100%,rgba(51,134,8,1)));
	background: -webkit-linear-gradient(top, rgba(135,185,0,1) 0%,rgba(51,134,8,1) 100%);
	background: -o-linear-gradient(top, rgba(135,185,0,1) 0%,rgba(51,134,8,1) 100%);
	background: linear-gradient(top, rgba(135,185,0,1) 0%,rgba(51,134,8,1) 100%)
	
	-moz-box-shadow: rgba(0,0,0,1) 0px 2px 1px;
	-webkit-box-shadow: rgba(0,0,0,1) 0px 2px 1px;
	box-shadow: rgba(0,0,0,1) 0px 2px 1px;
}

a.pager2:link, a.pager2:visited {
	font: 14px/26px MisoRegular;
	letter-spacing: 1px;
	text-shadow: #1C9328 0 -1px 0;
	color: #fff;
	background-color: #444;
	display: inline-block;
	padding-right: 15px;
	padding-left: 15px;
	-moz-border-radius: 0 13px 13px 0;
	-webkit-border-radius: 0 13px 13px 0;
	border-radius: 0 13px 13px 0;
	background: -moz-linear-gradient(top, rgba(135,185,0,1) 0%, rgba(51,134,8,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(135,185,0,1)), color-stop(100%,rgba(51,134,8,1)));
	background: -webkit-linear-gradient(top, rgba(135,185,0,1) 0%,rgba(51,134,8,1) 100%);
	background: -o-linear-gradient(top, rgba(135,185,0,1) 0%,rgba(51,134,8,1) 100%);
	background: linear-gradient(top, rgba(135,185,0,1) 0%,rgba(51,134,8,1) 100%)
	
	-moz-box-shadow: rgba(0,0,0,1) 0px 2px 1px;
	-webkit-box-shadow: rgba(0,0,0,1) 0px 2px 1px;
	box-shadow: rgba(0,0,0,1) 0px 2px 1px;
}

a.pager1:hover, a.pager2:hover {
	line-height: 22px;
	padding-right: 13px;
	padding-left: 13px;
	border: 2px solid #9433FF;
	background: -moz-linear-gradient(top, rgba(118,0,249,1) 0%, rgba(65,0,142,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(118,0,249,1)), color-stop(100%,rgba(65,0,142,1)));
	background: -webkit-linear-gradient(top, rgba(118,0,249,1) 0%,rgba(65,0,142,1) 100%);
	background: -o-linear-gradient(top, rgba(118,0,249,1) 0%,rgba(65,0,142,1) 100%);
	background: linear-gradient(top, rgba(118,0,249,1) 0%,rgba(65,0,142,1) 100%);
	text-shadow: #37197e 0 -1px 0;
}

a.pager1:active, a.pager2:active {
	line-height: 26px;
	padding-right: 15px;
	padding-left: 15px;
	border-style: none;
	background: -moz-linear-gradient(top, rgba(65,0,142,1) 0%, rgba(118,0,249,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(65,0,142,1)), color-stop(100%,rgba(118,0,249,1)));
	background: -webkit-linear-gradient(top, rgba(65,0,142,1) 0%,rgba(118,0,249,1) 100%);
	background: -o-linear-gradient(top, rgba(65,0,142,1) 0%,rgba(118,0,249,1) 100%);
	background: linear-gradient(top, rgba(65,0,142,1) 0%,rgba(118,0,249,1) 100%);
}

4) And finally - well, who can resist a big red button!

a.round:link, a.round:visited {
	width: 140px;
	color: #fff;
	font: 28px/30px LeagueGothicRegular;
	text-transform: uppercase;
	text-shadow: #6f0909 0 -1px 1px;
	border: 1px solid #6F0909;
	display: inline-block;
	padding-top: 40px;
	padding-bottom: 40px;
	-moz-border-radius: 70px;
	-webkit-border-radius: 70px;
	border-radius: 70px;
	-moz-box-shadow: inset rgba(255,255,255,.8) 0 2px 4px;
	-webkit-box-shadow: inset rgba(255,255,255,.8) 0 2px 4px;
	box-shadow: inset rgba(255,255,255,.8) 0 2px 4px;
	background: -moz-linear-gradient(top, rgba(180,9,9,1) 0%, rgba(111,9,9,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(180,9,9,1)), color-stop(100%,rgba(111,9,9,1)));
	background: -webkit-linear-gradient(top, rgba(180,9,9,1) 0%,rgba(111,9,9,1) 100%);
	background: -o-linear-gradient(top, rgba(180,9,9,1) 0%,rgba(111,9,9,1) 100%);
	background: linear-gradient(top, rgba(180,9,9,1) 0%,rgba(111,9,9,1) 100%);
	-moz-background-clip: padding-box;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	-webkit-transform: rotate(-12deg);
	-moz-transform: rotate(-12deg);
	-ms-transform: rotate(-12deg);
	-o-transform: rotate(-12deg);
	transform: rotate(-12deg);
}

a.round:hover {
	-moz-box-shadow: rgba(255,255,255,1) 0 0 20px, rgba(255,255,255,1) 0 0 30px, inset rgba(255,255,255,.8) 0 2px 4px;
	-webkit-box-shadow: rgba(255,255,255,1) 0 0 20px, rgba(255,255,255,1) 0 0 30px, inset rgba(255,255,255,.8) 0 2px 4px;
	box-shadow: rgba(255,255,255,1) 0 0 20px, rgba(255,255,255,1) 0 0 30px, inset rgba(255,255,255,.8) 0 2px 4px;
	-moz-transform: rotate(0deg);
	-moz-transition: -moz-transform 0.3s ease-out;
	-webkit-transform: rotate(0deg);
	-webkit-transition: -webkit-transform 0.3s ease-out;
	-o-transform: rotate(0deg);
	-o-transition: -o-transform 0.3s ease-out;
}

a.round:active {
	-moz-box-shadow: rgba(255,255,255,1) 0 0 20px, rgba(255,255,255,1) 0 0 30px , inset rgba(0,0,0,.5) 0 4px 4px;
	-webkit-box-shadow: rgba(255,255,255,1) 0 0 20px, rgba(255,255,255,1) 0 0 30px , inset rgba(0,0,0,.5) 0 4px 4px;
	box-shadow: rgba(255,255,255,1) 0 0 20px, rgba(255,255,255,1) 0 0 30px , inset rgba(0,0,0,.5) 0 4px 4px;
	background: -moz-linear-gradient(top, rgba(111,9,9,1) 0%, rgba(180,9,9,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(111,9,9,1)), color-stop(100%,rgba(180,9,9,1)));
	background: -webkit-linear-gradient(top, rgba(111,9,9,1) 0%,rgba(180,9,9,1) 100%);
	background: -o-linear-gradient(top, rgba(111,9,9,1) 0%,rgba(180,9,9,1) 100%);
	background: linear-gradient(top, rgba(111,9,9,1) 0%,rgba(180,9,9,1) 100%);
	-moz-background-clip: padding-box;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
}

You can see a working demo of all the buttons here: Cross browser pure CSS3 buttons →

If you liked this article and the demo, you may be interested in my other CSS demos:

• CSS3 Isometric Text Demo 14th Mar 2011 →
• 7 Great CSS based text effects using the text-shadow property 3rd Mar 2011 →

Just recently I have been playing around with the multiple text-shadow capabilities of CSS3. Now, building on top of that I have produced a method for creating 3D isometric text, by using multiple text-shadows and 2D transforms.

In this demo the 3D text is created from multiple offset shadows that increase in darkness with no blur applied. The text is then made isometric by applying a 2D transform to skew the text in the Y axis to an angle of -26.6°. (OK, true isometric art is set at -30°, however pixel-based isometric art is set at -26.6° as this produces the smoothest lines).

-webkit-transform: skewY(-26.6deg);
-moz-transform: skewY(-26.6deg);
-o-transform: skewY(-26.6deg);

The shadow under the text is produced by a second line of text that is skewed twice — once in the Y axis to -26.6°, and then again in the X axis to 63°. To get it looking blurred, the colour of this text is set to transparent: rgba(0,0,0,0) and its text-shadow is set to transparent black with a 4px blur: text-shadow: 0 0 4px rgba(0,0,0,0.3);.

color: rgba(0,0,0,0);
-webkit-transform: skew(63deg,-26.6deg);
-moz-transform: skew(63deg,-26.6deg);
-o-transform: skew(63deg,-26.6deg);
text-shadow: 0 0 4px rgba(0,0,0,0.3);

This shadow text is created using Javascript, so that the titles don't appear twice to search engines.

This demo works only for Firefox, Safari, Chrome & Opera. You can see it here: CSS3 Isometric Text Demo