All My Children and CSS3 › grant norwood

I know, I’m just lobbing titles over the fence these days, but it’ll make more sense in a moment. The SXSW Interactive Festival 2011 is beginning, and I’ll be there with badge on! Some of the other Springbox crew members will also be there, including several talented individuals who are speaking. Check out our SXSW 2011 page to catch up on the fun stuff, and grab yourself a request to our super rad party on the balcony of the W Hotel. Springbox has some of the brightest minds in interactive, and we’ve got an open bar, so … yeah!

While I was HTML-ifying our SXSW page a little while back, I came across the requirement for a nice semi-transparent background for a floating div. It was to have sharp, fully opaque text, play well with our chosen TypeKit fonts, and partially reveal the cool photo behind it exactly how the designer mocked it up. This is such a common request, and a cool effect. But until recently, web developers have always had to work pretty hard to achieve such a simple treatment in the browser.

Opacity has been tough because the default behavior of the CSS opacity property is to not only affect the transparency of the element it is set on, but also all of it’s children. (See? Full circle. Bam.) But this isn’t the effect we want in this case, and in the past I would resort to some positioning tricks using relative positioning or negative margins to simulate that effect.

Enter CSS3 and the rgba() syntax, which allows as to set opacity using a fourth parameter after the RGB values. This will only change the opacity of the element it is set on, and it’s children will remain fully opaque!

#RightBlueBox {
  /* Give it a 90% opacity. */
  background:&nbsp;none repeat scroll 0 0 rgba(9, 33, 59, 0.9);
}

Only WebKit, Gecko, and Opera browsers currently support this feature, basically all but IE (as usual). But IE does have a workaround (aka hack) that somewhat works in IE7/8. Before I give you the code, here are the issues you should be aware of when using this hack:

Requires the infamous hasLayout property in IE to be set to true. Use “zoom:1;” to cause IE to set this value.
Using the Microsoft filters disables ClearType, and so you may notice blurry text with certain fonts, weights and sizes.
Uses hex code for the alpha level instead of the standard 0 to 255 value. It’s annoying, but you can do a quick calculation to get the converted hex code.

Convert rgba() to #ARGB

Thanks to Kilian Valkhof for this rgba/#ARGB converter code snippet!

Ok, and here’s the CSS code. I keep it in my screen-ie.css file which is conditionally loaded for IE 8 and below only.

#RightBlueBox {
  /* Give it a 90% opacity. */
  background:&nbsp;transparent;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#e609213b,endColorstr=#e609213b);
  zoom: 1;
}

Basically, we have to use Microsoft’s gradient filter to set the same start and end colors (so effectively there is no gradient at all) along with their option for setting the opacity hex code via the first 2 characters of the color string. IE9 will support rgba(), however.

So that’s how it was done! Find me at SXSW in Austin this weekend, or follow me on twitter (@grantnorwood). The weather is beautiful and I know this town is going to pull off another super rad show for developers, designers, and the other brainy and creative types swarming in. Welcome to my hometown everybody, and be sure to catch plenty of Texas blues with your Texas booze!