css sprite generator
Posted: Tue Oct 09, 2012 8:02 pm
Ill have to try this when I get a chance. Good for button fallbacks and stuff. But if you are using this purely for icons I would sugest something else instead of images. Just make you own icon font. http://icomoon.io/#toHome.
Using icons in fonts is far superior to using png sprites for a few reasons. One you can apply any style that would work with any font. Like text-shadow. Two you can make it any size you want. And three transitions can be applied too. On Codelab with the pricing page I used transitions and a icon font to have the smooth transition from one color to another which is not possible with images. Well it probably is but you would have to use filters and other crazy stuff. That is just a basic use of this technique. You could have icons get bigger on hover and whatever you can think of. Just wait till "background-clip: text" is fully supported. Here is an example by Trent Walton, one of the guys from Paravel... http://trentwalton.com/bgclip/. Imagine that with icons. I can think of some unique stuff that could be accomplished super easy with that.