May 12, 06:24
CSS Transparency Issues
CSS 3 promises the ultimate almighty background transparency in Background attributes—opaque. Until then, and until all the major browser adopt those new properties seen in CSS3 we’re locked up with Transparent PNGs and Opacity properties.
I could use JS effects, or simply have a background that looks transparent(a non-transparent jpeg or gif). Or I could use the technique discussed at ALA on Transparent PNGs and what not. I strongly recommend having normal markup not touched with JS for visual effects. Specially if it ain’t a web-application. I’m also against having to work out many different things to achieve a simple effect.
If all that I wished was right then nobody would’ve gone and found a work around the transparency issues.
Issues Explained
In CSS2 there’s a property that could be used on most of the block type selectors which is “Opacity” ,IE6 & IE7 come with the same property but as a member of “Filter” group. Firefox older than 2.0 misses Opacity and uses -moz-opacity instead. This is the definition.
The problem is here, upon making an element see-through(opacity:0.5; or filter:alpha(opacity=50) in IE) all the children of that element become see-through! And no, setting the children to have different opacity values won’t work. So where’s the problem? It shouldn’t be a problem thinking from the base and why the Opacity property was made, but looking at no way to have only transparent backgrounds makes it a problem since it’s the only markup based solution. Until “background: #000 opaque %50” works.
Looking at the footer of this website you’ll find the see-through brown rectangle making all the other elements in it see-through, the only part that was not intended to be transparent was the copyright line, the rest were all intended to be that way, but since it worked, I didn’t have to worry about it.
The header of this site uses the same effect but with one difference, the logo is not see-through so Opacity did not work for me there, a see-through PNG came to rescue but then it doesn’t work on IE6! Well, the IE6 users would see the logo w/o the transparent brown box. Same goes with the boxes in homepage. What a mess. No I won’t apply a solution that makes me include a zillion JS files and add 30 lines to my stylesheet. I can live with having IE6 users not seeing the transparent bits.
Related Articles
« Previous post: And We're up again, dotone redesigned
» Next post: Traffic-Talk is always on