Note: This document should be considered superseded by Virtuelvis: Gallery: Real Opacity. It remains archived for informational purposes only.
The reason? Well, this example was created only as a showoff in a newsgroup, and to highlight bad performance with alpha blending in browsers. It was never intended to work as a tutorial for people, as it didn't cover compatibility and accessibility issues. For instance, if you turn off images, this page breaks in an extremely nasty fashion. Unfortunately, search engines picked up this document, and it became quite popular.
The real tutorial covers browser compatibility more in-depth, and is an example that degrades much more gracefully. I strongly recommend you read that instead. Also, from time to time, I will write other articles on CSS and XHTML at Virtuelvis. I hope you will find some of it useful.
Simple CSS techniques can transform a fairly dull design into something a bit out of the ordinary. The techniques outlined here are, in all but one small case, fully standards-based
After having visited Eric Meyer's website, and become fairly impressed by his knowledge of CSS, and achievements in the css/edge gallery,
What impressed me most at the time, was the complexspiral demo, where a background image was fixed on-screen, and visible through several layers.
The problem was, however, that the technique, while fully standards-based, didn't work well in other browsers than Mozilla. It simply had to be possible to create this effect, and make it work properly in both Opera and Internet Explorer
I also felt that, for the newer browsers, while the degradation was functionally graceful, eastethically, it's degradation was all but graceful.
While Eric had only used standard images, and standard CSS1, plus a little bit of CSS2, I knew that in order to make this truly cross-browser, I had to both use png image files with alpha-channels.
The effect you are seeing, should work in a fairly similar manner in Opera, IE6 (5.5?) and Mozilla.
The technique used relies on the standards-compliance of two of the browsers, and the failure to do so for the third.
IE has trouble handling alpha-blended png's correctly. Namely, ignores the
"blend" in alpha-blending, and renders the color as a non-transparent solid
color. This means we have to cheat, and use the filter-property
in Microsofts extensions to CSS to add opacity
For Opera & Mozilla, this is pretty straightforward, as we just add the background to the page as normal.
The box you are reading right now, has the following (relevant) properties set:
div.contentArea{
background: transparent url('t60w.png') repeat;
}
Where 't60w.png' is a png with an opacity value of 60%.
As I said, for IE we have to rely on cheating to make this work:
filter: progid:DXImageTransform.Microsoft.Alpha(opacity = 60);
It should work in recent browsers, with decent support for alpha-channel png's. It should also work fairly well in browsers without this support, as older UA's act the same as IE, and should see a solid background color.
The only browser which might break a bit, is IE5/Mac, if it has an up-to-date png support. I haven't been able to test this though.
What about the non-standard CSS-property used?
you might ask. Well:
as long as browsers are instructed to ignore
unknown properties by the CSS2-specification, there should be no real
danger, as the overall usability of the page does not rely on this
property.
I can only think of one: Alpha-blending requires quite a lot of system resources, and a page employing this technique might appear sluggish on old systems. It was however, tested on an ancient P200MMX with three servers running on it. Still usable..
The picture of the Moon was done by Carsten A. Arnholm, using a cheap web camera, loads of patience and other accessories. Great work, which deserves credit. Read his original announcement on the image on Usenet. (in Norwegian)
The idea? I already mentioned Eric A. Meyer somewhere near the first paragraph, but the idea of doing this cross-browser came into mind after discussing cutting-edge CSS usage in the norwegian newsgroup no.it.tjenester.www.html, after trying to convince thos users who prefer doing layout with tables.
Regards - Arve Bersvendsen