A List Apart: Comments on: CSS Sprites: Image Slicing’s Kiss of Death

Posted by: Neil

2012-01-31T13:00:49+00:00

Thanks Dave. You're work has, yet again, helped move us in better direction.

Posted by: Fran�ois Briatte

2012-01-31T13:00:49+00:00

.. that CSS are the present and future of the Web.

Posted by: LintHuman

2012-01-31T13:00:49+00:00

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 by: LintHuman

2012-01-31T13:00:49+00:00

Or rather, "Dave, Doug, S�ren, et al". Ahem.

Posted by: Chris Hester

2012-01-31T13:00:49+00:00

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 by: Dave Bug

2012-01-31T13:00:49+00:00

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 by: CM Harrington

2012-01-31T13:00:49+00:00

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 by: Dave Marks

2012-01-31T13:00:49+00:00

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 by: Jonathan Stanley

2012-01-31T13:00:49+00:00

... 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 by: Stuart

2012-01-31T13:00:49+00:00

Very nice work. I like the idea of CSS image maps. :-)

Posted by: Will

2012-01-31T13:00:49+00:00

Nice write up with some good examples. Thanks Dave. This basic idea had occurred to me a while ago for just the reason that Dave Marks mentions in his comment above. I was going to demonstrate it by doing Amazon's nav bar in CSS with one master image. Needless to say, I didn't get round to it. Such a simple nav bar lends itself perfectly to this technique. I have seen this technique (or a variation of it) in use already: http://www.smithpaul.com/archives/2004/03/03/indepth_css_sidebar_titles.php" However, it breaks if you resize the text - so you need to stick to images.

Posted by: LazyJim

2012-01-31T13:00:49+00:00

Good, well written, expansion on a well known technique, and as already pointed out, your demonstration shows good examples. In regard to single image vs lots of images... 1) As already mentioned there will be some memory saved by combining images that share the same pallet. 2) In particular, GIF images can store long solid-colour horizontal lines in very small memory space. 3) Splitting in to many images allows most peoples web browsers to download them faster because they can be downloaded simultanseously (only helps of fast connections). 4) I may have missed it in the article, but I don't think you mentioned the main reason for having a single image, is if you had a different 'after' image, it would not start downloading intil you hover over it, (So putting the before and after images in a single file removes the need for a JavaScript 'pre-loader'). Here's another example of this technique in use: http://www.alpha-matrix-design.co.uk I'd welcome comments and constructive criticism, but direct it to me not to this discussion board.

Posted by: Joshua Brewer

2012-01-31T13:00:49+00:00

Yet again, I am blown away by the amazing power of CSS. Thank you for illuminating this technique. I am sure there are many who will find amazing ways to use this.

Posted by: Eric Marcoullier

2012-01-31T13:00:49+00:00

I checked out the example with the skyline and nothing happened. Maybe a settings issue?

Posted by: janis:L

2012-01-31T13:00:49+00:00

that's all I can say. It is sexy!

Posted by: Stephanie

2012-01-31T13:00:49+00:00

Not seeing anything spiffy about the skyline in Camino either.

Posted by: Dave S.

2012-01-31T13:00:49+00:00

Thanks all for the feedback so far! To those experiencing browser discrepencies -- it's possibly related to cache. If you've configured your browser to 'Check for new page every time' or similar, it may be trying to re-download the image for every hover. Leave your mouse over the link a bit longer, give it a chance to show up, and it should. Also keep in mind that this is mostly a developer setting. End users won't usually have this selected, so you needn't worry about it too much.

Posted by: Jason M.

2012-01-31T13:00:49+00:00

A number of folks mention that this technique degrades nicely. When people say as such, are they including browsers like Netscape 4.x? I am just curious because this technique doesn't degrade well at all with Netscape 4.79. I'm still learning and justed wanted some clarification in this regard. Thanks.

Posted by: Peter Richardson

2012-01-31T13:00:49+00:00

Lovely concept Dave, but I'm showing the re-download for every cache setting: always, auto, never... the hover-delay hounds me. It's unnatural. IE6, Win2K

Posted by: Mark Hurd

2012-01-31T13:00:49+00:00

Great work Dave. Well-written, great examples, everything in there was extremely well done. I'll definitely be saving this article for future use. The irregular shapes will come in handy some day - not sure when, but it's only a matter of time. :)

Posted by: Chris Vincent

2012-01-31T13:00:49+00:00

I've seen Pixy's hover technique, and I've built a couple sprite engines in my lifetime. I don't know why this didn't occur to me. Very cool. I can imagine several uses for this other than hover effects... I'll try a few things and see what I come up with.

Posted by: Luke Redpath

2012-01-31T13:00:49+00:00

Along with Doug Bowman's sliding doors article, easily the best thing I've read on here since the relaunch. I look forwards to your next article. I definately plan to use this on the new lastfield site to replace the highlighting UK map we use on our contact page.

Posted by: Luke Redpath

2012-01-31T13:00:49+00:00

For Jason. M... Perhaps they don't appear to be degrading well as Dave hasn't put the list text in any of his examples? If the text was there, then you would see a fine unordered list, or at least you should be able to. Perhaps Dave would consider adding list text to his final examples to demonstrate how it degrades?

Posted by: azw

2012-01-31T13:00:49+00:00

[quote]The big difference is where we position the

s; the goal is to surround each graphical element with a box that tightly hugs the edges.[/quote] I'm surprised that things don't fall apart when you mouse over a place where two boxes overlap! Any idea why this works? Could it be that if it's not clear which box you want, the browser simply does nothing? Very nice!

Posted by: Dave S.

2012-01-31T13:00:49+00:00

Here's a [url="http://www.mezzoblue.com/tests/sprites/blobs.html"]test case[/url] with actual text in each link for the benefit of testing in NN4.x. Note that I've used Phark image replacement here, which doesn't work in IE5. "I'm surprised that things don't fall apart when you mouse over a place where two boxes overlap!" Whichever link has a higher z-index gets priority -- so in a corner where two boxes overlap, in this case the one that appears later in the source code is the one that gets triggered, and the other is ignored. You can pick and choose which links get priority by explicitly setting a z-index value, but I decided to just let them fight it out in my examples.

Posted by: Chris Hester

2012-01-31T13:00:49+00:00

Damn, doesn't seem to work fully in Mozilla 1.6 on XP. (I used 1.5 before.) The two examples, one with "borders turned on", do nothing. Yet the final "So there you have it" version does work! Same result in Firefox 0.8.

Posted by: Martijn ten Napel

2012-01-31T13:00:49+00:00

I've done something alike with javascript mouse-overs and not slicing the images up, but I never seen it done with CSS before. Eric Meyer's famous spiralling shelve demo springs to mind, but this one actually works in IE! One mayor plus using larger images is that once the two images are loaded, the caching of the images make the rollovers fast, while pages with a lot of sliced up images tend to have a small delay.

Posted by: Dave S.

2012-01-31T13:00:49+00:00

Chris -- the examples you cited weren't meant to work at that point in the narrative; only the final examples in each section are fully functioning with mouseovers. Martijn -- funny you should mention the Complex Spiral, I considered rebuilding it with background-image positioning for this article, but decided that was too much of a tangent. I think it can be done, it just wouldn't end up fixed-position.

Posted by: Matt Irwin

2012-01-31T13:00:49+00:00

I'll just add to the compliments, I really like your code, its very clean and elegant and it degrades nicely. Bravo!

Posted by: Simon Meskens

2012-01-31T13:00:49+00:00

Great article, it lacks a bit in code originality, since it uses lot of the latest articles' code (Image maps, rollovers, FIR, etc), but it certainly gives users a lot of ideas and code examples. It's what everyone who reads ALA has been thinking of doing once, but never came round to. A really useful reference, definately a keeper. "I think it can be done, it just wouldn't end up fixed-position." Wouldn't you just use the combination of these two rules: background-attachment: fixed; and background-position: -10px -20px; (example values)

Posted by: Derek Pennycuff

2012-01-31T13:00:49+00:00

I see no obvious reason why buttons like in the icon example couldn't be spread across the content. Not that doing such is a good idea from a usability standpoint, but you could make even 2 different sets of buttons and still use the one master image idea, right? You'd just have to reposition accordingly. Gifs were used in the example but as long as the individual images were kept small is there any particular reason to avoid jpgs? My thinking here is I'm currently building a site that will have several photo galleries of about 12 thumbnails each. If I want to go with a rollover effect for each thumbnail (say a sepia toned image and a full color image), would the bandwidth benifits of this technique still apply to the use of jpgs? Again, I don't see any obvious reason that it wouldn't, but I've learned not to assume too much.

Posted by: Dante-Cubed

2012-01-31T13:00:49+00:00

It's the usual: ALA avoiding the serious questions for stuff like this. I don't really care anyway.

Posted by: Matthew Magain

2012-01-31T13:00:49+00:00

...then why are you here? Great article Dave.

Posted by: jim

2012-01-31T13:00:49+00:00

Anyways, blobs! Awesome article, it's always the simplest things we stumble across which end up being the most useful.

Posted by: ephi

2012-01-31T13:00:49+00:00

really, this article just amazes me how with some little ideas you can make them more applicable in various ways.

Posted by: Ryan

2012-01-31T13:00:49+00:00

I have been using this method for my nav links for a while and it works wonderfully. I never thought of using it for irregular shapes in that manner. Great work! I always love to have a great place to point questions on this subject too.

Posted by: Dante-Cubed

2012-01-31T13:00:49+00:00

Why does everyone use LIs when they are not neccessary? It's extra markup for no reason!

Posted by: hartless

2012-01-31T13:00:49+00:00

as each image must be verified before download. Could save quite a bit of time for many icons or images.

Posted by: Tony

2012-01-31T13:00:49+00:00

[blockquote]Why does everyone use LIs when they are not neccessary? It's extra markup for no reason![/blockquote] Because, if we're talking about navigational links, they *are* a list...A list of links. A list is a list is a list, whether it's a grocery list, top ten list, or list of links. Not to mention, by marking up your links as a list, it gives *incredible* flexibility if/when you wish to change the layout of your site. Want your nav running vertical down the side? No problem...just change the CSS. Want the nav to display horizontally across the top? Cool...change the CSS. If you're so worried about an extra LI around each link, I think you need a new hobby. (Not sure why I'm taking the bait...) Anyway, great *useful* article Dave. Most of us appreciate it.

Posted by: robin

2012-01-31T13:00:49+00:00

Excelent job! I'm everytime surprised what you can do with CSS. Keep it coming...

Posted by: David House

2012-01-31T13:00:49+00:00

Very nice indeed.

Posted by: Terry

2012-01-31T13:00:49+00:00

You have a way of thinking out of the box (no pun intended) that is very refreshing. Yesterday, in your mezzoblue post, you showed us that by leaving out the left and top properties in a positioned element you can effectively place an absolutely positioned block in the normal flow of the document. This article illustrates how it can be used to great effect when your child elements can be positioned inside their parent element - a positioned parent element that is still inside the normal flow of the document. I always thought that you either use float positioning or absolute, and that mixing the two were impossible. With this technique you have demonstrated whole other worlds of possibilities. I think this is the real innovation of the article. Your rollover examples are only one application of many to come.

Posted by: Jemal

2012-01-31T13:00:49+00:00

Dave: the NN4 version you linked in the comments leaves blue lines stretched across the page from the left margin in Firefox 0.8 under Win98. Not seeing any of the problems other people encountered.

Posted by: Twyst

2012-01-31T13:00:49+00:00

To Dave: Wonderful technique. I had come up with a layout that was going to need something like this just a couple of days ago - Perfect timing! To Dante-Cubed: If you're so concerned with the "serious questions", and you can't keep from reading ALA, why don't YOU write an article about what you think is important? Complaining does nothing more than irritate the rest of us. As a previous commenter said - "If you don't like it, why are you here?" Rather than complain, contribute.

Posted by: Jonas Sveningsson

2012-01-31T13:00:49+00:00

...is filled with lists. Go figure!

Posted by: Subrisi

2012-01-31T13:00:49+00:00

...but since no-one has suggested it, what the hell. Could one large image file be used to replace all the seperate images for a page and lead to quicker loading?

Posted by: rgw

2012-01-31T13:00:49+00:00

David Shea, you've done a heck of a lot to legitimize CSS for graphic designers and given me a ton of inspiration. You are just plain awesome. I can't wait to test out this method.

Posted by: Dante-Cubed

2012-01-31T13:00:49+00:00

Yeah. They're there for a reason: I wanted the square bullets. I was talking about using lists for no reason at all. I have a reason. "you need a new hobby" What is that supposed to mean? I have far too many: Musician, writer, historian, web developer. I tried contributing. Didn't work. ALA would never publish me. That's why I stick to what I'm good at: San Francisco History.

Posted by: Dave S.

2012-01-31T13:00:49+00:00

Derek -- definitely. You could build thirty different sets of buttons on one page and have them all draw from the same master image (though if you're trying to construct thirty sets of buttons you might wish to re-evaluate your strategy). No reason to avoid JPG or PNG, any image format should work fine. Actually, Skyline (the first example in the article) makes use of JPG. Your particular example would be an interesting case study; JPG compression works a little differently, but you might still see enough savings in overhead to justify it. GIF does run into limitations when you try to cram a whole bunch of differently-coloured images into the same master image; you can tell on the blob example, even though it's 256 colours. Just something to keep in mind; JPG might be preferable sometimes. This is one area where old-school slicing and dicing has a leg up, at the expense of the multiple colour tables. Terry -- the positioning trick is just a feature of CSS, has been for ages. Though I have to admit, I've known about it for a while but never actually used it to my advantage until recently; it was a quirk more than a feature until I really understood it. Subrisi -- I thought about that for a bit. As long as you're trying to fit your sprite inside very specifically-dimensioned containers, then yep, you should be able to do it. But in practice you'll probably find it doesn't make much sense; a larger container will cause the other bits and pieces of the master image surrounding your sprite to poke through. Might be an interesting experiment though... rgw -- What can I say? Thank you! (and thank you everyone else providing useful feedback.)

Posted by: rgw

2012-01-31T13:00:49+00:00

http://rick.renegadeonline.net/ - first attempt w/ method first impression: me-likey this sprite-cutting technique.

Posted by: Jon

2012-01-31T13:00:49+00:00

Image maps are really neat. Maybe I'm just a newbie to CSS, but why is the background set to transparent? Thanks!

Posted by: Peterman

2012-01-31T13:00:49+00:00

Dante-Cubed wrote: >>> They're there for a reason: I wanted the square bullets. I was talking about using lists for no reason at all. I have a reason. <<< I hope you're joking. But in case not: You don't use lists simply because you want square bullets. You use lists when what you're dealing with actually IS a list. A list of links is, by definition, a list. Sure, using

:s because you want the square bullets is a reason, but it's not a good reason. You might as well say "I'm using them because the pope has 215 purplegreen anecdotes stuffed in his seventh kneecap on damp and lonely thursdays". ;)

Posted by: Lyle Konkiel

2012-01-31T13:00:49+00:00

I have to say this is absolutlely brilliant. Thanks Dave, you have once again proven your abillity to craft new ways to use old ideas... This will no doubt become common practice among CSS developers for years to come.

Posted by: magnus

2012-01-31T13:00:49+00:00

Jemal: "Dave: the NN4 version you linked in the comments leaves blue lines stretched across the page from the left margin in Firefox 0.8 under Win98. Not seeing any of the problems other people encountered." a { text-decoration: none; } should fix that.

Posted by: Christophe Porteneuve

2012-01-31T13:00:49+00:00

Dave, you just plain rock. There are so many CSS-relatd sites I wish I had time to read... Still, ALA and Mezzo do sit on top of the list, and this kind of article makes the "why" of that obvious. Brilliant.

Posted by: setmajer

2012-01-31T13:00:49+00:00

I actually ran across this technique while reading a Danny Goodman DHTML article in 2000, though he used JavaScript rather than CSS. After Zeldman implemented the Fahrner Image Replacement on the Daily Report, I got to messing about with combining the techniques as Mr. Shea has done. While I never actually finished my explorations (testing/hacking in Opera and IE/Win and a multitude of small variations on the basic principal created a black hole), some of the ideas that came out of the experiments included: -- using an animated GIF for the :hover state -- adding additional :visited and :active states for the buttons -- including a 'current page' state to show the user where they were in the site -- using one image per link (rather than one image per state) to increase positioning flexibility -- using an acutal image within the and positioning that (rather than a background image) within a block-level element with overflow: hidden, so that visitors with images disabled but CSS enabled would have alt text available -- using a single-pixel transparent GIF (horror!) sized with CSS to get the alt text if images were off but CSS was on, and a span with a display of none to provide text if images were on and CSS off/unsupported; the obvious drawback is that screen readers will read the link text twice, which is unseemly but perhaps preferable to having the links entirely hidden to users with images off but CSS on

Posted by: Dante Evans

2012-01-31T13:00:49+00:00

I know. I would have used display: list-item, but IE 5x doesn't support it, and it was just as complicated. I decided not to bother, and used lists.

Posted by: TheGoblin

2012-01-31T13:00:49+00:00

Thanks for posting that article! It's pure genius! For a while I wanted to have an image map where the images were separate from each other, but until now I had no idea how to do it. I've changed the navigation on my website so it uses this sprite system, but I've made a few changes. In case you were wondering, I got the hover images to work in Opera using a bit of JavaScript. It's a little bit bigger, but it works for me! If you want to see it, please check out my homepage: http://www.boxofjunk.net/ Again, this article is excellent!

Posted by: Marko

2012-01-31T13:00:49+00:00

... in IE 6.0? Anyone have a suggestion? Otherwise very good article, Dave!

Posted by: Dante Evans

2012-01-31T13:00:49+00:00

[removed] //Powered by DCScript function zebra() { var node = document.getElementById("zebra"); var tds = node.firstChild.firstChild.childNodes; for (var i=0;i

Posted by: Ali Farahani

2012-01-31T13:00:49+00:00

Ahh CSS you solve all of my woes. If it hasn't been said before, I'll say it again (and again and again): excellent article. Really ingenious utilization of CSS here -- I immediately ran to my computer to make my own! I think trying it with animations would prove interesting... On an aside(sorry), I am wondering if anyone knows the url to a website that illustrates designing css layouts using colored in borders. I want to pass that along to a friend who could really use it. I think the site in question had a rose as an example graphic? In any case, everyone at ALA is doing a great job -- thanks for feeding my brain with wonderful things :).

Posted by: Dante-Cubed

2012-01-31T13:00:49+00:00

Why don't you just marry CSS, Dave Shea or A List Apart? Just kidding. Dave has done a lot of stuff with CSS. He's done as much with CSS as PPK has with Javascript and the DOM.

Posted by: sal

2012-01-31T13:00:49+00:00

Great lesson! I'm blown away by the innovation. Just when I thought CSS did just about everything, too!

Posted by: Chris Hester

2012-01-31T13:00:49+00:00

I think the previous comment (http://www.alistapart.com/discuss/sprites/6/#c7039) is in the wrong thread. No zebra tables here! Dante-Cubed: lists are used because they *degrade* gracefully. If the user turns off CSS, they get a nice HTML list instead.

Posted by: Chris Hester

2012-01-31T13:00:49+00:00

Ali Farahani - look at the layouts here: http://positioniseverything.net I also have a layout demo on my site which uses borders to create columns of equal height: http://www.designdetector.com/articles/cssdemo1.php

Posted by: Chris

2012-01-31T13:00:49+00:00

I love this technique, nicely mixing some others to create an easy to reuse one. There is a lot of power in the background positioning technique. Right now I am using it on my new portfolio site, and I use it for a rollover and highlight state of an icon rather than the nav itself. check the work in progress, I will write an explanation document for an internal DOM training. http://icant.co.uk/index.php

Posted by: tik

2012-01-31T13:00:49+00:00

I really like the clean usefulness of this idea but I as well as several other designers use repeating backgrounds will this work with images that require patterning?

Posted by: Yannick Schall

2012-01-31T13:00:49+00:00

I must say i'm super impressed by this technique. I'm learning css right now and designing a few webs sites. so i was wondering how i should slice my layout and implement nested div all over the place to make it work. But simplicity is always mother of reason. I tried to adapt this technique to my navigation bar, adding as well a piece of css to show the current page status ( like in the i3forum page ).Then i removed all the script for the slicing script in an external css. but now it's not showing anymore. is there an issue if this technique is externalized ?

Posted by: Andy Moss

2012-01-31T13:00:49+00:00

I have tried something like this a while ago when i saw the fast image replacement but I tried using animated gifs which would work in everything but opera. for some reason it didn't like using animated gifs as backgrounds.

Posted by: Phunky

2012-01-31T13:00:49+00:00

Posted by: Michael

2012-01-31T13:00:49+00:00

Does PPK know about Dante's love for him? Should we tell him?

Posted by: magnus

2012-01-31T13:00:49+00:00

I'm using this teqnuiqe, plus some other stuff i figured out myself (positioning a little box somwhere else on the page on :hover), only using CSS, now it looks like the CSS is going to be very big for a very small page! What's best to use? CSS or Javascript?

Posted by: magnus

2012-01-31T13:00:49+00:00

Wasn't finished writing, dumdumb me :P The CSS is starting to grow well over 150 lines, only for this page: http://www.urbanturban.no/index.html (The new page is not uploaded yet). Is it better now, to do as it is done on the old page, use JS to show the "info images" on hover, or go with css?

Posted by: Travis

2012-01-31T13:00:49+00:00

I have been playing around with this idea today but with no success. Is it possible to use this method to replace the image used to submit a form?

Posted by: Ryan

2012-01-31T13:00:49+00:00

Wonderfully creative! With CSS level 3 around the corner who knows what the ALA crew will think up next?

Posted by: Dante-Cubed

2012-01-31T13:00:49+00:00

I really shouldn't post stuff when I'm tired. I make silly mistakes like mispeling wurds.

Posted by: Dante-Cubed

2012-01-31T13:00:49+00:00

And I'm the one being called immature. I agree with a lot of what PPK says. He's seems to think (in some ways) like me. I don't love him. I don't agree with everything he says.

Posted by: Ray Miller

2012-01-31T13:00:49+00:00

Wonderful concept! It solves and simplifies a lot of issues I (and most likely many others) have had problems with. Dave, your example at http://www.mezzoblue.com/tests/sprites/blobs.html causes my Win/IE6 to have a delay of 2 to 3 seconds before showing the hover states. Mozilla's doing it right though. And the skyline example in this article works fine in IE6. What could be the cause of this discrepancy? Dante-Cubed, please correspond directly with people with whom you want to quarrel on a more personal level. I'd encourage others to not respond to your baiting any more.

Posted by: Radley Smith

2012-01-31T13:00:49+00:00

I've coded a few sites for some graphic designers, and I usually always have to slice up the navigation, as they are irregular shapes and have completely different backgrounds. An example is http://yayforgecko.net/k8/ where I used the sprites to work with the backgrounds. A potential problem is the IE5/Win position: relative bug http://www.quirksmode.org/css/ie5win_relative.html Make sure you always use a height when using this technique!

Posted by: paul

2012-01-31T13:00:49+00:00

i've slightly changed dave's code to work with text within each of the sprite boxes. it works in ie6, ie5.5, moz on pc and safari and ie on osX. i've had to use the box model hack, which is kinda ugly... so if anyone has a better way of doing this, please let me know. [url="http://230.ca/spritestext/"]http://230.ca/spritestext/[/url]

Posted by: Rob

2012-01-31T13:00:49+00:00

Thank you Dave! I have been thinking about my nav for awile and was using separate images for each menu item. I've immediately implemented it on my subpages, and it works great. This thing really saves time when making alternative style sheets. Hypothetically, one could put almost all of the images used on a page into one jpeg, and then when it comes time to redesign / create new style, all that would be needed to be edited would be the master image (then a find/replace on the css). Keep writing this stuff; this is why I read ALA

Posted by: jim

2012-01-31T13:00:49+00:00

Avoiding a hack in that particular example would be easy, just add span tags around the links then replace the 20px padding-right in #sidemenu a with #sidemenu span a 20px margin instead. Fair enough, some designers would rather use a hack than ‘code-bloat’ but that's down to personal preference.

Posted by: Steve

2012-01-31T13:00:49+00:00
Well... thats about it really - Superb! I love this CSS stuff. Everytime I use it I'm filled with on overwhelming feeling of "doing it elegantly" instead of kludging it horribly. And this is one of the most elegant uses I've seen yet. First time I've found this website... brilliant... I shall definitely be exploring it further.

Posted by: Janos horvath

2012-01-31T13:00:49+00:00
In case of "CSS on and Images off" a good solution is Gilder/Levin Method mentioned here:http://www.mezzoblue.com/tests/revised-image-replacement/ (yes with extra spans and no transparent images but i think it's worth). Image flickering: When you use that technique the flickering is very annoying because the text become visible on every mouse over. So I have created a behavior to solve this issue. (The behavior is really simple, adds a new image between the text and the span (based on the CSS background-image absolute URL)) Here: http://www.hszk.bme.hu/~hj130/css/list_menu/meh_menu/ (The page is in Hungarian but i hope you can understand the source code :) There is a another silly thing in IE. The mouseout doesnt chenges back the hover state of the span inside the link. We should add an extra a:hover {} rule beside the a:hover span{} and then everything works.

Posted by: matt

2012-01-31T13:00:49+00:00
In addition to the potential overall savings on filesize due to reduced overhead, there is also a performance benefit: only one trip to the server is required to fetch the images. This, in my opinion, is the more important gain (outside of cleaner and simpler html and css).

Posted by: Ray McKenzie

2012-01-31T13:00:49+00:00
Brilliant article Dave. Also...just read the D-W interview. Puts me in mind of applying this technique to a Zen-Garden project ; ) Dante...your a troll. You must not have been breast-feed as a child. Ya poor bastard. http://www.alistapart.com/discuss/sprites/4/#c6994

Posted by: Martijn ten Napel

2012-01-31T13:00:49+00:00
http://www.alistapart.com/discuss/sprites/8/#c7071 Paul, The height box model hack can be avoided by setting the line-height equal to the height and avoid padding at the top or bottom.

Posted by: Tim

2012-01-31T13:00:49+00:00
First off, I think this article is world-class. Dave took a good technique (Pixy's rollovers), and improved upon it. My question is really more around image replacement, so if this isn't the forum for it, please let me know (politely!). In an attempt to add text to the links in the Buttons section (#iconmenu), I've tried to repurpose the Shea Enhancement (Gilder/Levin IR w/ title) summarized on mezzoblue to work with links, instead of an h6 and nested span. I can't seem to get the to /not/ obscure the . In other words, the image replacement works, but the 100% span covers up the , and I lose the rollover and the cursor change. I'm elected not to use the text-indent: -1000em method of IR, so without gettting into an argument about which method is better, can someone point out the approach to use to incorporate Dave's "Shea Enhanced" IR tech with the #iconmenu example?

Posted by: Scott

2012-01-31T13:00:49+00:00
Very interesting article. But why, in the "Irregular shapes" section, is a second "after state" image required? Could you not spread out the pieces in the after state so that they do not overlap? This might make the math for positioning the after state pieces a bit more complicated, but it's something you'd only have to do once, and your after state image would be smaller and non-redundant.

Posted by: Marko

2012-01-31T13:00:49+00:00
I've just tried you examples, but I still experience slight delay in IE 6. Done some experimenting myself (http://www.inet.hr/~mdugonji/webdesign/experiments/image_slicing/), but my try isn't satisfying neither.

Posted by: Sam Ingle

2012-01-31T13:00:49+00:00
Janos, I believe there is something wrong with your settings, I viewed both your link and Dave's, and neither of them had any delay in IE 6.

Posted by: Dante-Cubed

2012-01-31T13:00:49+00:00
Will whoever is trolling my SF History board please stop. I know this is off topic but they are people from this ALA forum with the I.P. Addresses: 81.5.138.228 172.194.21.72 (someone named Mikey) I'm assuming the latter is the one who posted the "I love PPK" trash. Please stop. I will stop trolling here if you stop on my site. Ray, Spook and Mickey please stop. If you want to deal with me email me, don't post rubbish on my SF History site. Just because I might troll here is no excuse for you to do the same. Thank you.

Posted by: Mark

2012-01-31T13:00:49+00:00
I'm not sure that this technique is the end-all be-all solution that others are making it out to be. There's a sweet spot in a page's design where multiple connections to a webserver will almost certainly result in a faster display of images than this will. Consider this: you have an extremely image-heavy page, with a few nav items that each have a largish filesize. By concatenating all of these nav items together, you need to wait until the entire file downloads before displaying _any_ of the images. On the other hand, with multiple connections to a webserver, your nav items will be guaranteed to show up as soon as they are downloaded. If your nav item is over 2k, for instance, the image header filesize overhead is negligible. This is the age-old serial vs. parallel debate, just in graphic format. If establishing parallel connections requires just a bit more overhead, and bandwidth is constant, what's the point at which a serial connection is a better idea? For smaller pages, sure, knock yourself out, but for any decently-sized page (say 40k or larger) I just don't see this method as speeding up rendering times at all.

Posted by: Richard Perry

2012-01-31T13:00:49+00:00
Loved the article, only problem now is I have to go and RE-DESIGN my image maps! But probably a good idea to do so anyway. I was also intrigued by the other recent article on image maps (see: http://www.alistapart.com/articles/imagemap/) One question though. In the blob example by using appropriate title tags one can get the name of the link to pop up but I wanted to employ the effect used by eric meyers (old but tested method) of pop up text (see: http://www.meyerweb.com/eric/css/edge/popups/demo.html) so that the link name would appear somewhere else on the page, BUT I can't seem to get it to work in using this method? Is it because it is within a list? Should I give up? is there another more ingenius way? I'm NO expert with css but I love trying out the new methods people keep coming up with on alistapart, GREAT site.

Posted by: Janos horvath

2012-01-31T13:00:49+00:00
Marko: My behavior (.htc) doesnt solve the delay but the flicker. The delay is beacuse IE downloads every time the image again and again. 1. Mouseover/mouseout 2. IE:Turns of the image 3. IE downloading the image (the delay) 4. download complete IE show up the image Sam Ingle: If you set the cache properties in IE to "every visit" (or something like that) you should see the effect. (image flicker or text shows up) More about flicker in IE: http://www.fivesevensix.com/studies/ie6flicker/

Posted by: Scott Hamm

2012-01-31T13:00:49+00:00
This one is an excellent idea for my site, which can be used to select Eastern, Central, Mountain and Pacific zones in the United States before selecting specific States. I would appreciate to know the quick summary of Pro/Con of that design for all browsers wherever possible? I aim to satisfy my audience to the best possible, even for text-based lynx users.

Posted by: paperwings

2012-01-31T13:00:49+00:00
Sorry to wander off-topic again, but remember this is supposed to be a discussion. Everyone doesn't have to like what has been presented. If Dante doesn't feel that this is a worthwhile use of ALA's bandwidth, then so be it. He's entitled to his opinion, even if you don't agree with it. I know I don't. This is an interesting visual design element. And let's face it, Lynx compatibility and standards compliance aside, visuals are what draw in your guests, almost as much as your content. And that's my opinion.

Posted by: Chris Hester

2012-01-31T13:00:49+00:00
"I will stop trolling here if you stop on my site... Just because I might troll here is no excuse for you to do the same" So you admit to trolling. Sigh... If people are trolling your site, they've as much right as you have to troll here. But remember the ALA text at the top of this page: "We reserve the right to delete flames, trolls, and wood nymphs." Bye.

Posted by: Susanna King

2012-01-31T13:00:49+00:00
I just tried out this technique on a site that has buttons which require a number of states: normal, hover, selected, and disabled. What I found most useful was the ability to add and modify the button states just by swapping out one image. That way, I know that I've updated all the states of all the buttons and won't be surprised by a rollover state on a selected button that has the old font, for example.

Posted by: Sunny

2012-01-31T13:00:49+00:00
Nice Work Dave!! And the CSS has given me a completely new set of ideas to play around with. Thanks and lot fo sharing it.