In April, Ecommerce Developer contributor Drew Coffin published a great Adobe Photoshop tutorial about creating the graphics for a "Brushed Metal" top navigation bar.
Drew's tutorial was a hat tip of sorts to Apple's award-winning website and the company's well-known graphic and industrial design.
Drew's video sparked a request from one of our readers, who wanted us to demonstrate how to take the graphics Drew had created and apply them to a page. Well, here you go.
Get the Graphics
I downloaded the source files and found a nicely layered PSD file. At this point, I have to make a confession. I am using an ancient version of Photoshop—CS2, in fact—which may not have perfectly rendered Drew's CS4 files. Fact is, I have been meaning to upgrade to CS5.
HTML
I will also need some HTML. Here is my basic starting page.
<!doctype html> <html lang="en"> <head> <title>CSS for the Brushed Metal Effect</title> <link type="text/css" rel="stylesheet" href="style.css"> <link rel="icon" type="image/png" href="favicon.png"> </head> <body> <div id="wrapper"> </div><!--end wrapper--> <script src="js.js"></script> </body> </html>
Drew's graphics included six buttons, so I added an unordered list with six list items. I give specific ID attributes to the ul and each li. The list items will have an anchor tag and anchor text that matches the text images from Drew's PSD file.
<ul id="brushed-metal"> <li id="bm-home"><a href="#">home</a></li> <li id="bm-store"><a href="#">store</a></li> <li id="bm-about"><a href="#">about</a></li> <li id="bm-contact"><a href="#">contact</a></li> <li id="bm-support"><a href="#">support</a></li> <li id="bm-account"><a href="#">account</a></li> </ul>
Sprite Please
There are several ways that I could have coded this menu bar, including at least four different CSS methods. But I decided to use the same method that Apple used for its home page. To do this, I need to change the nice layered PSD file that Drew made into a sprite.
A sprite, as you may know, is a composite image of which we only use a small portion at a time. Here is a screen capture showing the sprite that Apple uses for its top navigation. Notice how the possible state of each menu item is represented in this single image.
To transform the brushed metal files, I create a new Photoshop file at 800px by 80px, or twice the height of the original. Next I make a copy of Layer 1 and recreate the mouseover effect that Drew described in his video. Finally, I duplicate the dividers and the text. For the "mouseover" text, I reverse the white and black layers. The result is a sprite that I can use.
CSS
With my sprite ready, I need to write the style descriptions. I start with my basic page style that simply sets up the page for me.
body {margin: 0; padding: 0; background: #FFF; font-family: Segoe UI; color: #505050; }
img {border: none;}
#wrapper {margin: 50px auto; width: 800px;}
The unordered list needs some very specific styles. Its padding and margins must be zero. I need to set the list-style to "none" so that no bullets appear next to the list items. The ul must have its width set to the sprite's width, and its height set to half of the sprite's height.
Last of all, the ul must have overflow set to hidden. This is important because we are using anchor text in our HTML, but we want the sprite image, not the text, to be visible on the page. I will add some padding to another element shortly that will finish hiding our text. I should note that this text will be visible to screen readers.
#brushed-metal {margin: 0; padding:0; list-style: none; width: 800px; height: 40px; overflow: hidden; }
Next, I set the styles for the list items in general, floating them to the left.
#brushed-metal li {float: left}
Now, I add the style descriptions for the anchors. Each individual anchor gets the entire sprite as its background, but only shows a small portion of the image. This is better in terms of site performance and creating 12 separate images.
#brushed-metal a{display: block; padding-top: 40px; background: url('nav-sprite.png') no-repeat; text-decoration: none;}
Notice that the display attribute is set to "block," and that I have added top padding. This top padding along with the overflow attribute above hides the anchor text.
Finally, I add style descriptions for each individual anchor tag.
#bm-home a {width:132px;}
#bm-home a:hover {background-position: 0 -40px;}
#bm-store a {width:133px; background-position: -132px 0;}
#bm-store a:hover {background-position: -132px -40px;}
#bm-about a {width:134px; background-position: -265px 0;}
#bm-about a:hover {background-position: -265px -40px;}
#bm-contact a {width:134px; background-position: -399px 0;}
#bm-contact a:hover {background-position: -399px -40px;}
#bm-support a {width:134px; background-position: -534px 0;}
#bm-support a:hover {background-position: -534px -40px;}
#bm-account a {width:132px; background-position: -668px 0;}
#bm-account a:hover {background-position: -668px -40px;}
The background-position attribute is key since it describes which part of the sprite is being displayed. As we move right across the page the first position indicator increases by the width of the previous anchor.
Specifically, the first anchor, #bm-home a is 132 pixels wide. Since it is at the far left when we hover, its background position is 0 horizontally and -40 vertically (half the height of the sprite). But the next anchor has a horizontal background position of -132 pixels, which is the first anchor's width.
Summing Up
That is all there is to it. I have quickly taken the excellent source files that Drew provided in his tutorial and transformed them into a working CSS menu.
