If you look at this site, you’ll note that there’s an opacity/transparency effect along with a mouse-over effect on the main content and the side column content. This was done using CSS. In CSS3, there’s an opacity property that can set the transparency for an object and all its child elements. It can be done by adding the following property to the CSS of the class/id in question:

opacity: 0.7;

In essence, setting it to 0.7 would be the equivalent of making the object about 70% of its normal opacity. Easy, right? There is a problem, of course, as this only works in modern browsers capable of CSS3 and not IE6/7. Luckily, IE has their own property using alpha-filters to get transparency to work. So, for IE browsers, we’d need to add the following to the class/id:

filter: alpha(opacity=70);

Read the rest of this entry »