CSS Sprites

By | | JavaScript & CSS

2

One of the most exciting techniques to emerge from the CSS community in recent months involves using a single large background images as a container for several smaller images, then using the CSS background position properties to show different parts of the larger image in different places (and different hover states) around a page.

To my knowledge, the first example of this trick in use was Petr Stanicek’s Fast rollovers, no preload needed demo. It has since been expanded upon by other members of the community: Dave Shea’s A List Apart article CSS Sprites: Image Slicing

Written By:

Simon Willison

Simon is a seasoned Web developer from the UK, currently working in Lawrence, Kansas. He specializes in both client- and server-side development, and recently became a member of the Web Standards project. Visit him at http://simon.incutio.com/, and at Stylish Scripting: SitePoint's DHTML and CSS Blog.

Website
>> More Posts By Simon Willison

 

{ 2 comments }

madproject.com May 5, 2004 at 11:26 am

All these cool CSS stuff are making me want to start another site.

sylozof May 4, 2004 at 8:18 pm

French readers, you can get a translation of the article “CSS Sprites” at this address : http://pompage.net/pompe/sprites/
Other french translations of useful articles can be found at http://pompage.net/pompe/

Comments on this entry are closed.