LanaOlogy: Web Design Delights

a blog detailing my journey into the world of web design.

Want Some Sprites?

Image SpritesNo, not that kind of Sprite! CSS Sprites can be used to create background-image-based navigation links, among other useful purposes.

One technique for using CSS Sprites for navigation that comes from A List Apart is to create an unordered list of the links in HTML, use CSS to assign it a “before” background, position the links appropriately on the list image, & configure the “after” [:hover] states with the new link backgrounds. This creates a navigation image that appears complexly interactive when cursor rollover occurs.

An example of CSS Sprites in action can be viewed here.