Discuss: Cross-Browser Variable Opacity with PNG: A Real Solution
by Michael Lovitt
- Editorial Comments
12 re: IE5.5 doesn't fail to 100% opacity...
On closer inspection the methods described in the article still don’t enable the afore-mentioned drop shadow in IE5.5+/Win (it’s fine in Mozilla).
Note that I added the drop shadow using a Fireworks MX Live Effect (also possible with Photoshop Layer Effects). I don’t know what difference this would/should make though…
posted at 04:49 am on December 23, 2002 by Richard Rutter
13 32-bit vs 8-bit
Thanks but no thanks. I’ll be damned if I’m going to put IE only code into my XHTML 1.1/CSS 2 pages.
For a while now I’ve been using PNGs as a replacement for gifs, but only 8-bit PNGs, not 32-bit. They work in 5th generation browsers and up, that’s what counts. Besides, 32-bit PNGs are a hell of a lot larger than their 8-bit brothers, so unless there’s a justifies reason to use 8-bit alpha then I’ll avoid it. Not everyone has broadband to download these bloated images quickly, me for example.
posted at 10:40 am on December 23, 2002 by
14 A real solution?
While I appreciate the desire for alpha transparency, and I love reading a well written article such as this, I must side with the nay-sayers this time. If we still have to make all the gifs, and sniff-and-serve, it’s more work, more time, more money, and clients don’t like that. It is super cool though, very appropriate for personal portfolio sites and the like, and I cannot wait until we can start really using transparency in the design process.
I don’t get why ie5.2 on mac os.ten can see a png used in a page, but not directly.
posted at 10:46 am on December 23, 2002 by Nate
15 Some sort of standard is inevitable
Mathias Langenegger said he thinks that standards are an illusion. We may never have a world with universal W3C standards but that doesn’t mean we don’t have a de facto standard of some sort. It’s simply too expensive to code and maintain code for different browsers.
Since large corporations typically only support one browser, anyone wanting to sell Web-based systems to them have to support that browser, or loose the sale. Since most companies support IE on PCs, that’s the standard that is used for development. As more products emerge that require IE, more companies deploy it, which means more companies code for IE, etc, etc.
posted at 10:59 am on December 23, 2002 by
16 What if?
How about a single Javascript function that adds the filter to all select images?
This one is invoked like so <body> and affects all <img class=“pnga” >. Replace “document.all” with the IE detector of your choice. Still doesn’t address 8-bit RGBA images or CSS backgrounds, but it’s a lot cleaner within the HTML…
Thanks Michael for the article :-)
—
function pngfix() {
if (document.all) {
var i, a, f;
for(i=0; (a = document.getElementsByTagName(“img”)[i]); i++) {
if (a.className==“pnga”) {
f = “progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’”a.src“’)”;
a.src = “/images/blank.png”; // Blank image required
a.style.filter = f;
}
}
}
}
posted at 12:23 pm on December 23, 2002 by Chris
17 Re: What if?
Erk, should point out that images can be included as normal:
[img]my-alpha.png width=“200” height=“100” alt=“a fine alpha graphic” class=“pnga” [/img]
posted at 12:31 pm on December 23, 2002 by Chris
18 Dear Web Developers: Browser Sniffing is Stupid
I didn’t say it…
http://webstandards.org/buzz/archive/2002_12.html#a000123
posted at 05:23 pm on December 23, 2002 by
19 ...
How ironic that the headline image for this article is a GIF and not a PNG. =P
posted at 09:35 pm on December 23, 2002 by
20 A really stupid remark (be warned)
It just occured to me: why would you bother to use these kinds of solutions/hacks/maintenance nightmares to serve up the right PNG images to the right browser to allow it to move from left to right over a photographic background, when you could use Flash for this?
I warned you, it is a stupid remark, but apart from semantics, DOM’s etc, Flash could be a better everyday life solution because it is almost omnipresent on different platforms – and according to the latest stories I read you can even make it accessible to everyone these days.
And I believe that all the effects illustrated in the examples in the article are meant for beautification, for ‘coolness’, not for accessibility or usability purposes. Which doesn’t make it a bad thing though, (visual) seduction of the user is as important as functionality. (ok – enough disclaimers, now shoot ;-) )
posted at 04:37 am on December 24, 2002 by Martijn ten Napel
Discussion Closed
New comments are not being accepted, but you are welcome to explore what people said before we closed the door.
Got something to say?
Discuss this article. We reserve the right to delete flames, trolls, and wood nymphs.
Create a new account or sign in below if you’d like to leave a comment.
Subscribe to this article's comments: RSS (what’s this?)
11 IE5.5 doesn't fail to 100% opacity...
In the article, Michael writes “In IE5.5+/Win, the transparent area of your PNG will display at 100% opacity—that is, it won’t be transparent at all.”
That’s not strictly true. In my experience the transparent area displays 100% transparent. For example, this PNG* has a drop shadow using variable transparency:
When viewed with IE5.5+/Win the shadow is not displayed at all, however the article implies it would be displayed fully opaque. In this case, full transparency is certainly preferable to full opacity.
I should point out that the PNG was coded using an IMG tag rather than as a CSS background.
posted at 03:46 am on December 23, 2002 by Richard Rutter