|
  |
|
|
Magic Icons for Lazy People (like me)
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.
|
|
 |
|
PLEASE VISIT THE CONTRIBUTOR'S WEBSITE
No reactions yet.
Please login or sign up to rate this intel.
Please login or sign up to add a comment.
The copyright for this content entitled "Magic Icons for Lazy People (like me)" has been specified by the contributor as:
All Rights Reserved
This content may not be copied, distributed or adapted by anyone under any circumstances.
|
|
|
This intel was contributed by ndev2k
|
May, 2012
2008
January, February, March, April, May, June, July, August, September, October, November, December
2009
January, February, March, April, May, June, July, August, September, October, November, December
2010
January, February, March, April, May, June, July, August, September, October, November, December
2011
January, February, March, April, May, June, July, August, September, October, November, December
2012
January, February, March, April, May
|
|
Not a member yet?
Qondio is a powerful network for making it online. If you have a website to
promote, we can help.
Sign up and get in on the action.
|
|
Welcome to Qondio! Discover the awesome power this network can deliver by going to our About page. Or you could skip straight to the Sign Up form.
|
|
