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

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>
</a>

Etc.
</div>

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-microformats,
div#promo-main-css,
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.

div.promo-main img[alt="Cover"] {
z-index : 2;
position: absolute; 
top : 0;
left : 0; }
 
div.promo-main 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 div.promo-main a:hover img[alt="Cover"] {
-webkit-transform : rotate(-1deg); 
-webkit-transform-origin : 50% 100%; }
 
.csstransforms div.promo-main 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 div.promo-main img[alt="Cover"],
.csstransitions div.promo-main img[alt="Disc"] {
-webkit-transition : all .5s ease-in-out; }

Shiny.

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

Andy Clarke 03/11/09 | Tweet this | Short URL: http://stuffandnonsense.co.uk/s/1219