Is this new to anyone?

[JoshWhiteDesign]

Hey guys, through all the hunting I did, I was not able to find any tutorials on how to create CSS sprites with a reusable, 1 button design. So any <a>’s within the menu would simply reuse the same sprite without needing to set each one with it’s own position.

So I played around with it and I think I’ve figured it out. Basically what I’ve done was created an image like this:

[attachment=0]hover.png[/attachment]

And then code it thus:

Code:

#leftmenu {
width:250px;
float:left;
min-height:400px;
background-color:#ccc;
position:relative;
}

#leftmenu li {
padding:10px;
list-style:none;
}

#leftmenu li a {
background: url(hover.png);
position:relative;
color:#000;
font-family:georgia;
font-size:16px;
width:200px;
height:50px;
display:block;
}

#leftmenu li a:hover {
background-position:bottom;
color:#777;
font-family:georgia;
font-size:16px;
position:relative;
height:50px;
display:block;
}

Code:

• Menu 1
• Menu 2
• Menu 3

Boom – a reusable 1 image sprite so you don’t have to add each individual link if you are just using the same background image for each menu item.

I’ve tested it in IE6, 7, FF and Chrome and it looks like it’s uniform. Again, this may not be new to anyone, but I was quite excited as it was new to me :)

[TheDoc]

While not new to me, it is a very good technique to get used to. I design quite a few sites now to specifically make use of it due to its simplicity. As you said, a lot easier to have it like that than to have to create a separate background for each.

You will probably still want to apply classes to the anchor tags though, so that you can set a "current" state!

[Author]

Posts