Using Transparent PNG Files

I had read about the gimmick mentioned in the article A List Apart: Cross-Browser Variable Opacity with PNG: A Real Solution a while back. But this article sums up the hack to use transparent PNG files in Microsoft’s Internet Explorer and makes it easier to use by bundling it with some JavaScript so you can use it in your web pages and still be compatible with modern browsers (Mozilla 1+, Netscape 6+, IE 5+).
So, why do you care? Well, if you’ve ever wanted to do a graphic for a web page and the edges of that image didn’t fall perfectly on pixel boundaries then you’ve typically had to do one of two things: a) force the edges to end on pixel boundaries or b) blend the edges of the image with a color and then make sure that you used that color behind the image when it appeared on the web page. The latter is why you often see sites that have button sets and they include different sets of buttons for white backgrounds, black backgrounds, etc.
But what if your background is indigo or crimson or something? Then you have to alter the buttons for your website. But not if you could make parts of images partially transparent. Then they could have edges that would blend and look right on any background. The PNG format allows for that and this article shows you how to take advantage of it (even if it is a hack on IE).

Advertisements