Discuss: CSS Sprites: Image Slicing’s Kiss of Death
by Dave Shea
- Editorial Comments
2 One more article which shows...
.. that CSS are the present and future of the Web.
posted at 05:49 am on March 5, 2004 by François Briatte
3 CSS cutting edge
I’m constantly surprised at the ways in which CSS can be manipulated to great visual effect. It takes people like Dave, Doug, Søren, et al, to keep that CSS cutting edge as sharp as it is. Excellent work.
posted at 05:59 am on March 5, 2004 by LintHuman
4 Slash that O
Or rather, “Dave, Doug, Søren, et al”. Ahem.
posted at 06:01 am on March 5, 2004 by LintHuman
5 My comments
Genius!
(The final green shape needs a tweak though. When hovering in Mozilla 1.5 on XP, the neighbouring grey shape edges out a touch.)
The introduction to this article reminded me of Boulderdash on the Commodore 64. That early games computer had several character grids you could hold in memory. Boulderdash cleverly switched between these several times every second to give the effect of animation. I once looked into the code and saw an earlier abandoned character set, with much cruder designs. Why is this important? Er, it’s not, but I thought I’d mention it.
Also the Commodore had built-in hardware sprites, which floated over the main character data used to make a screen. If only we had those in CSS…
posted at 06:37 am on March 5, 2004 by Chris Hester
6 Agreed...
The 2 separate active maps for the overlapping shapes is one of those now obvious, simple ideas I wouldn’t have thought of. Thanks for saving the headache.
As Chris Hester above said, the left green crescent is a bit off (tested in both Firefox and IE6). Not sure at first glance whether it’s a positioning or a graphics problem.
Also, to nitpick, a slight advantage to saving individual rollovers for graphics (at least in GIF form) is the ability for each image to have it’s own set of 256 colors. It’s not unlikely, given sufficiently colorful images, that the 256 color limitation involved in placing all active and non-active states for multiple buttons in one GIF could visually degrade the overall effect.
posted at 06:45 am on March 5, 2004 by Dave Bug
7 Wow!
I think the best part about this is the ability to degrade on non-CSS browsers, as the images themselves are merely list items.
Aaah, behold the power of unordered lists!
posted at 06:58 am on March 5, 2004 by CM Harrington
8 HTTP Requests
Ofcourse, using one image cuts down the number of http requests to the server, for each image.
In some cases i would expect that this would make up for an increase in file size.
I can think of several places i have used 10+ gif icons, which would probably have been faster as one image positoned using css
posted at 07:23 am on March 5, 2004 by Dave Marks
9 Excellent work...
… and very apt title too. :)
Looks like my weekend of not being glued to the computer doing (X)HTML+CSS stuff is out the window…
posted at 07:31 am on March 5, 2004 by Jonathan Stanley
10 Nice work
Very nice work. I like the idea of CSS image maps. :-)
posted at 07:32 am on March 5, 2004 by Stuart
Discussion Closed
New comments are not being accepted, but you are welcome to explore what people said before we closed the door.
Got something to say?
Discuss this article. We reserve the right to delete flames, trolls, and wood nymphs.
Create a new account or sign in below if you’d like to leave a comment.
Subscribe to this article's comments: RSS (what’s this?)



1 Another evolutionary step taken
Thanks Dave. You’re work has, yet again, helped move us in better direction.
posted at 05:44 am on March 5, 2004 by Neil