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’s Kiss of Death showed how the technique could be used to replace image maps, while Didier Hilhorst’s Navigation Matrix is an experment along similar lines.
Techniques like this are easier to discuss if they have a single acknowledged name – a principle that is well demonstrated by the design patterns movement in object oriented programming. My vote is for “CSS Sprites” (coined by Dave Shea) as it nicely expresses the idea of multiple smaller images encapsulated within a larger whole, and gives a nod towards retro video games as well.
Related posts:
- First Look: Object Oriented CSS Nicole Sullivan's Object Oriented CSS aims to make your styles...
- Squishing the Last Drops from Your PNGs One of the areas I've always felt Fireworks had Photoshop...
- CSS Font-Sizing: a Definitive Guide CSS font sizing appears to be easy until you try...
- The Two Ways of Sizing Absolute Elements in CSS Most developers have used left, right, top and bottom properties...
- Progressive Enhancement Techniques 2: the CSS In the second of a 3-part series, Craig explains how...
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/
May 4th, 2004 at 8:18 pm
All these cool CSS stuff are making me want to start another site.
May 5th, 2004 at 11:26 am