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:
The markup is pretty simple:
<div id="socialicons">
<ul>
<li class="fb"><a title="Facebook" href="https://www.facebook.com/"><span>Facebook</span></a></li>
<li class="tw"><a title="Twitter" href="http://www.twitter.com/"><span>Twitter</span></a></li>
<li class="ln"><a title="LinkedIn" href="https://www.linkedin.com/"><span>LinkedIn</span></a></li>
</ul>
</div>
But the CSS gets interesting:
#socialicons ul {
width: 150px;
height: 50px;
position: relative;
background: transparent url(/images/sprites.png) scroll no-repeat 0 0;
margin: 0 auto;
padding: 0;
list-style-type: none;
}
#socialicons span { display: none; }
#socialicons li { position: absolute; top: 0; margin: 0; padding: 0; }
#socialicons li, #socialicons li a { display: block; width: 50px;height: 50px; }
#socialicons .fb { left: 0; }
#socialicons .tw { left: 50px; }
#socialicons .ln { left: 100px; }
#socialicons .fb a:after { background: url(/images/sprites.png) 0 -50px; }
#socialicons .tw a:after { background: url(/images/sprites.png) -50px -50px; }
#socialicons .ln a:after { background: url(/images/sprites.png) -100px -50px; }
/* css3 coolness */
#socialicons .fb a:after, #socialicons .tw a:after, #socialicons .ln a:after {
content: "";
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
opacity: 0;
-webkit-transition: opacity 0.8s;
-moz-transition: opacity 0.8s;
-o-transition: opacity 0.8s;
transition: opacity 0.8s;
}
#socialicons a:hover:after, #socialicons a:active:after { opacity: 1; }
It starts off pretty typical, but around line 20 and 30, 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. (Note: if you cannot see the below icons, and have AdBlock Plus installed, go to AdBlock Plus settings -> Advanced -> Filter Lists, and disable “Fanboy’s Social Blocking List“, and reload the page. )
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.