CSS Sprites and How To Use Them
Posted on April 2, 2011 | No Comments
I thought you would never ask. Let’s start by showing the BEFORE example. Notice in the CSS below how the anchor tag does not get a background-image, but each individual class does.
#nav li a {background:none no-repeat left center} #nav li a.item1 {background-image:url('../img/image1.gif')} #nav li a:hover.item1 {background-image:url('../img/image1_over.gif')} #nav li a.item2 {background-image:url('../img/image2.gif')} #nav li a:hover.item2 {background-image:url('../img/image2_over.gif')}
Now check out the AFTER example. Notice in the CSS that there is a single background-image applied to the anchor element itself, and the unique classes merely shift the background position with negative Y coordinates.
#nav li a {background-image:url('../img/image_nav.gif')} #nav li a.item1 {background-position:0px 0px} #nav li a:hover.item1 {background-position:0px -72px} #nav li a.item2 {background-position:0px -143px;} #nav li a:hover.item2 {background-position:0px -215px;}
Comments
Leave a Reply
You must be logged in to post a comment.