Grow your CSS skills. Land your dream job.

Is this new to anyone?

  • # December 16, 2009 at 12:51 pm

    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;
    }

    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 :)

    # December 16, 2009 at 12:56 pm

    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!

    # December 16, 2009 at 3:05 pm

    Gotcha – setting the "current" state is something I really need to get a handle on.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".