SimpleBits ~ Magic Icons for Lazy People (like me)

10:10 AM

A neat little trick for those that want to change a site’s colors — but also create only one set of images that also reflects those changes. It’s been done on numerous sites, and I’ve employed the method on Fast Company with the redesign done back in April.

The idea is pretty darn simple, and works best with two-color images. Create a two-color .gif image and choose one of the colors to be transparent. Next, we’ll “fill in” the missing color with CSS using background. Change the CSS rule and the images will change with it. Very simple — but effective, and a heck of a lot simpler than creating multiple sets of icons.

Here’s an example (using inline styles to demonstrate). Below is a small little icon (13px x 13px) that is white and transparent. I’ll fill in the transparency with a few different colors using the same icon image, repeated:

On Fast Company I place icons within h3 headings and style them like this:


h3 img { 
	background: #369; 
	vertical-align: middle;
	}

It’s important to note that because I’m using white as the visable color, the icons will be invisible on the un-styled version of the page. This could an unintended benefit. Keeping decorative images entirely in the CSS file using background-image is arguably a more ideal solution — but the chameleon effect you can create with one set of transparent images is a nice little trick.

Add your own

12 Comments

Jon-Paul LeClair

Couldn’t you add the icon as a background image and adjust the left padding accordingly?

this removes the img tag from your markup.

that’s the way I do it…

Allen Ormond → blog.fromrocks.com/

I used this same idea to color my smilies at my site. I described the process here.

I’ve been thinking that another cool idea would be to use this for structural elements of the page design… such as the logo or any menu graphics that might exist. With png transparency you could get some pretty cool results.

leonard

keep up the good job Dan! Really neat and nice codes you’ve got!

Bruce

This is a very useful technique. It’s especially useful for nav rollovers which have text in an obscure font so need to be images, but are simple enough for GIF.

saumendra → www.saumendra.com

Good articles to read on. Nice Practicle tips which can be mastered to make huge diffrence.

Will → www.jackhoya.com/

I like Jon-Paul’s suggestion. I already use transparent GIFs as icons for certain “utility” links (i.e. e-mail, comments), so I’m going to implement something similar to his idea. I’ll apply a class to the anchor tag and then use CSS to add left-hand padding and the appropriate icon as a background image. The image will simply go away when content is unstyled. If (when) we get native browser PNG support and alpha transparencies this tip will be even more powerful. Thanks Dan!