Realigning For A Beautiful Web using HTML5, CSS transforms and transitions

  • Words: Andy Clarke

Now that our For A Beautiful Web workshops calendar is closed for the year, it was time to push live a redesign of that site with a focus on my new DVDs. This was a chance for me to play, both with HTML5 and CSS transforms and transitions to spice up the interface.

What? DVDs? You have DVDs? Oh, yes, I have! How kind of you to ask. “Designing with Microformats”, “Designing with CSS” and “Designing Web Accessibility”. I recorded them earlier this year. You can buy them via For A Beautiful Web. I'd like that.

The new For A Beautiful Web uses HTML5 because, well, why not? It also uses Modernizr, which is now an essential part of my toolkit of files. Modernizr helps me to use different CSS properties for browsers with different CSS handling capabilities and to design around their differences. The combination of HTML5, Modernizr and CSS3 is really making me passionate about designing for the web at the moment.

For A Beautiful Web home page

For A Beautiful Web’s home page has been making people smile with it’s spinning DVD discs, made possible by CSS transforms and transitions. As it stands at the moment these CSS properties are available if you use a Webkit-based browser, but during this week I will update the site to make them available to Firefox 3.6 users too.

First, the HTML. I marked up each DVD promo using a division, although the main action happens in the first anchor which contains two images and a heading.

<div id="promo-main-microformats">
<a href="#" title="Designing with Microformats">
<img src="cover.png" alt="Cover" />
<img src="disc.png" alt="Disc" />
<h3>Designing with Microformats</h3>


Although the disc appears to be behind the cover, I chose to place it second in the source order because I felt that presented better if (for some reason to do with the apocalypse) CSS was unavailable.

Now the CSS. First I gave each division proportions and floated them left. I also added position:relative; to make each division a positioning context for its absolutely positioned children.

div#promo-main-accessibility {
position : relative;
float : left; 
width : 240px; 
padding : 320px 0 1.5em 0; }

Why the 320px top padding? Because the space that creates is just the right size to absolutely position the two promo images. img[alt="Cover"] {
z-index : 2;
position: absolute; 
top : 0;
left : 0; } img[alt="Disc"] {
z-index : 1;
position: absolute; 
top : 70px;
left : 85px; }

Notice the two z-index values? They allow me to place the DVD cover in front of the disc, even though that comes second in the source order.

That’s it (for any non-Webkit browser). Oh… you want shiny?

People using Webkit browsers are treated to a little easter egg to spice up their experience. CSS transforms and transitions, first proposed by Webkit, are now finding their way to Firefox and will be in version 3.6. Opera? Not yet (go on Opera engineers, I dare you). Internet Explorer? Probably not, but I can live with that.

First I rotated the images on :hover. The cover image by only -1 degree with an transform origin 50% horizontally and 100% vertically. The disc image was translated (moved) 40px to the right and rotated by 300% so that the DVD branding is visible when the transition stops.

.csstransforms a:hover img[alt="Cover"] {
-webkit-transform : rotate(-1deg); 
-webkit-transform-origin : 50% 100%; }
.csstransforms a:hover img[alt="Disc"] {
-webkit-transform : translate(40px,0) rotate(300deg); }

To make the transforms happen smoothly, I added a transition duration of half a second that has a little inertia (ease-in-out) for a more natural result.

.csstransitions img[alt="Cover"],
.csstransitions img[alt="Disc"] {
-webkit-transition : all .5s ease-in-out; }


(Now, did I mention that you can buy my DVDs at For A Beautiful Web?)

Contact us


Let’s design something fabulous together

Call 01745 851848, tweet or email us.

Answer these questions if you’d prefer to send us a little information about your project before you call.

Our projects start at £5,000 plus VAT with an average project costing between £10,000 and £20,000 plus VAT.

We’ll keep your information private and we won’t share it with anyone else.

Studio address

OpTIC, Ffordd William Morgan,
St. Asaph Business Park,
St. Asaph, Denbighshire, North Wales, LL17 0JD

(Here’s a map showing how to find our studio.)

Registered office

Eversleigh, Lon Capel, Gwaenysgor, Flintshire, North Wales, LL18 6EJ