I’ve been doing some work on corporate ukphonebook.com to bring it up to date – making the design a couple of hundred pixels wider, converting the old XHTML to HTML5 and replacing the old menu button images with new, pure CSS3 ones. We’re going to talk about the new menu buttons as there are a couple of really good reasons for doing this:
If we wanted to add a new menu button in the past, I had to open up Adobe Fireworks and create two new images (the menu buttons had images for both their off and on states). Sometimes I had problems here as I couldn’t find the original multi-layer PNG file and had to try my best to replicate an existing, flattened one – this led to inconsistencies with the gradients, text drop shadows, and sometimes even forgotting that the menu buttons were supposed to have slightly rounded corners… Oops!
Not only was this time consuming, but at present, we have 219KB worth of menu images. The CSS code (plus fallback background images for older browsers) weighs in at a tiny 814 bytes, and if we need to change the text or add a new button, we just have to make a simple edit to the HTML. Much better!
Here’s the HTML code:
<a href="#" class="menu-button">Electoral Roll</a>
Here’s the CSS:
border: 1px #CDCDCD solid;
text-shadow: 7px 4px 4px #ccc;
background: url(images/menu-bg.png); /* fallback image */
background: -moz-linear-gradient(top, #fff, #efefef);
background: -webkit-linear-gradient(top, #fff, #efefef);
background: -ms-linear-gradient(top, #fff, #efefef);
background: -o-linear-gradient(top, #fff, #efefef);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#efefef));
background: url(images/menu-bg-on.png); /* fallback image */
background: -moz-linear-gradient(top, #fff, #DBEBFB);
background: -webkit-linear-gradient(top, #fff, #DBEBFB);
background: -ms-linear-gradient(top, #fff, #DBEBFB);
background: -o-linear-gradient(top, #fff, #DBEBFB);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#DBEBFB));
And finally – the old image (left) compared with the shiny new CSS replacement (right).
Although CSS3 isn’t supported by older browsers, actually, the worst thing that happens is the buttons lose their rounded corners, and are missing the slight drop shadow on the text. These browsers will all fall back to a 1px wide repeated backround image – you can’t even tell the difference!