Monthly Archives: November 2015

A new look for CSS3 Sprites

It’s interesting to realize just how long ago this technique began to be used, and in terms of web technology, the fact that it still sees widespread usage is pretty telling how groundbreaking this was back then.

Now, with more and more browsers supporting CSS3 transitions, it’s now possible to add fancy fading effects to your sprites without even needing javascript, and with minimal impact to the usual css3 sprites code for rollovers, and a bit of :active for mobile devices to at least catch the fade-in on click.

Starting with a typical sprite used for social media links ;  150×100 with 40px icons centered in a 50px matrix:

typical sprite used for social media rollovers

The markup is pretty simple:

But the CSS gets interesting:

It starts off pretty typical, but around line 23, instead of repositioning the css sprite on hover we do something a bit different —  using the CSS pseudo-class :after to hold the re-positioned image in the same place as the original but with an opacity of 0 (so it’s completely transparent), we adjust the opacity on :hover/:active to 1;

The even fancier bit comes from the new transition property where we adjust it over a 0.8 second span to create the fadein/fadeout effect.

The result?  Sexy.

The CSS for this feels a tad more elegant as well. Plus since this sort of fanciness requires no additional javascript, you save a tad on your website download payload to the client browser.