Sunday 27 March 2011

CSS image sprites example

CSS image sprites are a great way to load a group of images in one fell swoop.

I use these images sprites in my exhibit boxes for displaying the thumbnail images. Like in the promo photos for XIII in Stu's pages for example.

You declare each sprite as a class twice in your css code like so...
.css_image_sprite_01, .css_image_sprite_02{include size dimensions etc. here and the source image}
.css_image_sprite_01{x,y for the first image goes in here}
.css_image_sprite_02{x,y for the second image goes in here} etc.

It is really a very simple affair. Check the example above. Google exhibitbox for more examples.

No comments:

Post a Comment

Important Note:

Anyone is free to post links here but only if a back link to this site (or www.websiteadministrator.com.au) is added from your blog or website.