New to the Mac? Check out TUAW's Mac 101

Change icon color with CSS

Some Random Dude (yes, that's what he calls himself) has created tiny, bare-bones white icons that can be "transformed" into a variety of colors and shapes using CSS. They're called "sanscons," and they're very cool. SRD's sanscons are free to download, or you can make your own.

"Wait a minute," you're saying; "Changing the color of an icon with CSS? This sounds too good to be true."  Okay, let's back up and be honest: you're not actually changing the color of the icon itself; you're placing the tiny white image on top of a colored background, and specifying a background image to determine the icon's shape (square, circular, or rounded corners). But to the user, it's all the same. And why is it important to you, the developer? Because it allows you to change color schemes on the fly, while also keeping your bandwidth down, since the actual images are so minuscule.

A few caveats: Yes, GIF masks are aliased. No, the icons will not print out on paper. Any in many cases, a background image applied to whatever element you want the icon to go along with may work better for you. But if you need (for example) the image itself to be a link, or need to be able to change color schemes, this is a technique you'll be thankful for.

Reader Comments

(Page 1)

RESOURCES

RSS NEWSFEEDS

Powered by Blogsmith

Other Weblogs Inc. Network blogs you might be interested in: