css sprite generator

Resources to help you design and build better websites. Post any interesting design or programming links and articles you come across. Your instructor and fellow students will thank you.
Post Reply
BrandonBarringer
Posts: 28
Joined: Tue Aug 28, 2012 7:02 pm

css sprite generator

Post by BrandonBarringer »


kylesmith
Posts: 70
Joined: Tue Aug 28, 2012 9:27 am

Re: css sprite generator

Post by kylesmith »

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.
Kyle Smith

Post Reply