Web Design: Faking Alpha Blending with gifs
pngs are nicer than gifs because they have true alpha blending, not just transparency. However, they don't work in IE. I'm using the "pngfix.js" script to make alpha blending work in IE, but it's just not perfect. The divs that the script adds mess up my CSS. True alpha blending becomes important if you're rendering your image on a complex background such as a gradient.
I found a suitable workaround. If I start with a png and get it to look right in the browser, I can grab a screen shot. Then I trim the outside of the image to make it transparent. Hence, the actual background is "hard coded" into the gif along the edges of where it becomes transparent so that true alpha blending is not necessary, but most of the image is still transparent so that the complex background shows through. Best of all, the gifs are a lot smaller than the original pngs.
I'm sure this trick is well known, but it was new to me. Oh the depths I go through to make IE users happy!
I found a suitable workaround. If I start with a png and get it to look right in the browser, I can grab a screen shot. Then I trim the outside of the image to make it transparent. Hence, the actual background is "hard coded" into the gif along the edges of where it becomes transparent so that true alpha blending is not necessary, but most of the image is still transparent so that the complex background shows through. Best of all, the gifs are a lot smaller than the original pngs.
I'm sure this trick is well known, but it was new to me. Oh the depths I go through to make IE users happy!
Comments
-- Neil
I only it were that simple!
That's a good question. It's because I'm using a complex background (gradient, etc.). I can use Firefox to show me how the image should ideally look on the complex background. Then, I can take a screenshot to get it to work in IE. Using transparency around the outside of the image gives me a little wiggle room to be off by a pixel or so, but along the edges of the logo (or whatever) the alpha blending looks mostly right.
Dude, you're so wrong. IE6 will be here to haunt us for a long time to come. Here it is March 2007, IE7 is out and still how many corporate desktops still don't have IE7? Lots.
It is amazing how many clueless sheep use that POS they call IE6.
Some of those sheep happen to be potential clients/customers and we still need to reach as many people as possible. Support for IE6 should not be disregarded quite yet, it is still very much used.
And that's exactly the problem: IE6 sucks, it's old.. Been around since 2000 or so, and will still be around quite some time, sadly.
Any idea how much hassle many webdesigners have to go through to get their websites to work in IE6? IE7 is better, but still far off from FF or many others..