how to make a dithered gradient (trans -> opaque)

ok, here's the challenge. Using CSS, I want to put a semi-transparent image over another image (by semi-transparent I mean a GIF in which alternating pixels are transparent - see attachment).

I drew this image basically pixel-by-pixel (via copy/paste), and it's ok as far as it goes, but what I REALLY want is for the density of opaque pixels to increase from left to right, so the effect when laid over an image is essentially that of a gradient. I DON'T want to have to draw this image pixel by pixel!

Whenever I try and accomplish this in Photoshop, it uses semi-transparent pixels which then become opaque when optimized. If I could figure out how to tell photoshop to build a gradient using only 1 color and no semi-transparent pixels (or barring that, white and another color and then I could delete the white...), that would do it I think.

Any ideas on how this might be accomplished?

Thanks,
Daniel

I figured it out - and it looks like crap:
http://www.theatrebayarea.org/v2/index.jsp?css=blue

OK, plan B. Anybody have any experience with the PNG format? It looks promising, but clearly has some support issues for IE. Are there hacks or workarounds to have PNGs, transparency and IE all at once? Anyone have any sites or tutorials they can recommend?

btw - to do what I described, I saved the file as a PNG-8, which allowed me to set # of colors and transparency dithering. Then I re-opened the file in Imageready and saved it as a GIF.

-Daniel

I had this problem before, the best way to go about transparency on the web right now is through 'faked' transparency. Otherwise it get's really messy... see this thread.

http://forums.devshed.com/t104323/s.html

I'm pretty accustomed to faking transparency, but I was hoping to go about this one differently as I wanted to be able to switch out different headers depending on a user-selected stylesheet, as well as randomly load images behind the transparent header.

There are a number of workarounds out there, all using IE's alphaimageloader proprietary tag. The one you followed from Dalton seems pretty graceful, but riddled with problems.

I tried the one described at http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html and it seems to work well. Takes a second for the image to go transparent, and it takes a little longer to load, so I'm not sure I'll stick with it, but I can use CSS so that the behavior only applies to this one image and not every image loaded on the page, so I'm going to play with it a bit more.

Thanks,
Daniel