If you’re using Firefox to view this blog, you will have noticed the funky header and calendar, and their opacities (scroll down to view) when over content.

While putting together the CSS for the effect, I came across a deficiency in CSS3 and another in Firefox.

The CSS deficiency is that, once an element has an opacity of anything less than 1, it’s containers cannot have any higher opacity than that value.

To explain further, I’ll try describe the effect I was trying to achieve – I wanted to have a semi-transparent background, but fully opaque foreground. It seemed obvious to me that the way to achieve this was to apply an opacity of .7 to the container object, and 1.43 or so to the contained text (to bring it back to 1 in total). Unfortunately, the W3 specs forbid this:

Syntactically a <number>. The uniform opacity setting to be applied across an entire object. Any values outside the range 0.0 (fully transparent) to 1.0 (fully opaque) will be clamped to this range. If the object is a container element, then the effect is as if the contents of the container element were blended against the current background using a mask where the value of each pixel of the mask is <alphavalue>.

I feel tempted to sign up to the W3 CSS discussion to ask about this.

Anyway – I thought, then, that a less cool, but still funky method would be to apply a semi-transparent image as the background.

That would have been a perfect solution, and worked fine, except that (as you can see, if you’re in Firefox), the header and calendar have curved corners. In Firefox, the background color is confined within the radius, but the image is not.

I thought to report this to mozilla.org, but it turns out that this bug has already been reported …over three years ago!

Oh well – I’ll just have to suffer with the buggy CSS 🙂

Yes, I could generate the curve with a quick gimp, but I’m too lazy for that, and besides – I prefered the pure CSS method anyway.