It's true I love transparencies, unfortunately the great minds at Microsoft did not feel the way I did until they released IE7.  You see IE6 lacks the inherit ability to cope with the transparency layer in PNG files.  There are of course a lot of hacks to get around this which I will not go in depth into today.

If you want to read more about PNG's and IE6 read this post.

Instead I would like to show a technique that I have used recently to create dynamic interfaces using a minimal set of graphic files.

Here is the problem I'm trying to solve.  I have a site that has a wonderful gradient Menu bar/ Nav Panel/ Box/ whatever that needs to change color or have multiple colors.  Now what you could do is make a bunch of different back grounds for each color you want or (my technique) have a transparent PNG cover the solid CSS based background color and simply change the color in CSS to match.

Here is an example of what a typical transparent nav bar will look like...

In black..

In Blue...

In Yellow...

In Purple...

The only thing different in these examples is the Color code in the CSS

The first step in this process is to create the PNG file.  This is actually harder than you may think.  I use fireworks for my graphic design needs so I wont give you specifics but the technique should be similar in all graphics programs.

What you need to do is create a background image that is the same height as the nav bar you want to make. In this case the file I created is 1024 x 30 pixels.  The important part is not the size make sure you set your background to be transparent, not a solid color.

Next I make a layered background box so I can see what the gradient will look like. Then create a white box and apply a gradient to it.  You will want to adjust the opacity of the gradient at different sections to change the look, do not simply choose the color you want it to fade to.  So at every point in your gradient you should have the SAME color only different opacities. In my example the top of the transparency layer is 70% and by the middle of the graphic the opacity is 0%.

Next we have to code it in HTML and CSS.  Of course this would be a decidedly simpler process if you didn't have to account for IE6, but we still do so here it is.

HTML

 
<div id="baseLayer" style="background-color:#000000;">
<div id="transparentLayer">
<a href="#">Menu 1</a>
<a href="#">Menu 2</a>
<a href="#">Menu 3</a>
</div>
</div>
 

CSS

 
#baseLayer{
position:relative;
width:800px;
height:30px;
}
 
#transparentLayer{
position:absolute;
top:0px;
left: 0px;
width:800px;
height:30px;
background-image:url('/images/transparentPNG.png');
}
 

Now the hack for IE6

 
* html #transparentLayer{
background-image:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='/images/transparentPNG.png', sizingMethod='scale');
 
}
 

Now I only showed you examples of the code that outlines the technique. More css was required to make this example play nice. Please feel free to examine the full CSS for my examples above, also go ahead and download the transparent PNG. Looking at it is probably much simpler than trying to explain what I did in words.

I hope you enjoyed my first post. Although I wont be posting often, when I do my intentions are for it to be significant ones.