Logo Color Variations
1st edition — by Patrick McNeil — Jan. 20, 2006
The Design Element
There are times when you have a logo or an icon that you need to be able
to render in multiple colors. On this site for example the DMD logo
changes depending on the chapter you are viewing. This is currently achieved
by replacing the image with a new one. This isn't the most efficient way
to do things, making all these logos in different colors.
It occurred to me that I could perhaps accomplish this with a combination
of some basic css and a transparent image. What I came up with was a reversed
out logo contained inside of a div which can be assigned any color of my
liking. See the image below for a basic idea of how this is structured.
I began by creating a version of my
logo as a gif with transparency. As you can see the sample looks terrible!
« Gif
based version
The problem of course is that transparent gif's don't
support partial transparency. That is to say that each pixel is either on
or off, transparent or opaque. So things get chunky fast. This would work
I suppose if your image contained no curves or diagonal lines that required
dithering to render nicely or if it was a pixel based design.
But this doesn't work for the DMD logo.
Welcome PNG to save the day! Png files do in fact support
partial transparency and the same logo template was used on all six of these
variations:
I think this is pretty cool, I can change the logo with
infinite variety and I don't have to worry about loading up Photoshop or
keeping track of all the image files. Even better is that the style to define
the logo color can be outside of the template region used in Dreamweaver,
meaning I can't break the page while adjusting the logo.
How about using photos as backgrounds? Why not! Here
are two jpegs that we will use instead of the background-color tag.
Of course there has to be a catch! Three issues come up
when using the technique:
Rendering transparent PNG's in IE
Internet explorer
has to give us trouble of course. IE doesn't render transparent png's in
a very helpful way. The amazing thing is how easy the fix is. A single statement
in your css file will correct the problem. Check out the WebFX site
for a complete explanation of the fix and a copy of the two files needed
to make this work.
Fixing the printer output
The second problem shows up when you go to print a page
using this technique. The problem occurs because printers don't print background
colors or images. This can be fixed by doubling up the logo. Place two copies
of the logo in the page:
- The transparent version
Just add a statement to your css for printing setting it to display:none
and height:1px. This will hide the transparent logos from the printer.
- A positive or normal version
Add a second logo which is a default logo. Set this one to display:none
in your screen css file.
To reference these two css files you would use html similar to this:
<link href="Print.css" rel="stylesheet" type="text/css" media="print" />
<link href="Screen.css" rel="stylesheet" type="text/css" media="screen" />
CSS Disabled issues
The fix for printer output partially fixes this problem. It leaves a "normal"
copy of the logo in the page for the browser to render without the need for
css wizardry to look right. In this samples case you get a huge white area,
but that is because we have 6 copies of the image. If your logo template
includes anything none white this could be an issue.
The first benefit of this technique is the reduction
in bandwidth usage by only loading up one logo file. The other huge benefit
is that a page designer could change an image
or logo color with out having to hit photoshop. This is really the biggest
gain in my eyes, the ability to quickly change something in the html as opposed
to loading up the image, editing it, ftp, yada yada.
Links
Transparent
PNG fix used on this page to correct IE rendering issues.
Same idea
presented at SimpleBits
