CSS Opacity/Transparency Effect
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);
Simple? Well, this is web design, we’re talking about and browser compatibility is never quite that simple. The CSS3 opacity property doesn’t work for older mozilla-based browsers, either. To get the opacity/transparency effect, we’d need to add the following:
-moz-opacity:0.7;
And just to cover our bases, for any webkit-based/Safari browsers, we’ll want to add the following:
-khtml-opacity: 0.7
So our final code, for this site, looks like the following:
.post {
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
}
To get the hover effect that changes the opacity, we’ll use the pseudo-class hover on our post class. So the additional code would look like this:
.post:hover {
filter: alpha(opacity=100);
-moz-opacity: 1.0;
-khtml-opacity: 1.0;
opacity: 1.0;
}
Essentially, that tells the browser to display the object at 100% opacity (no transparency) when the mouse hovers over the object. Voila, that’s it.
No related posts.
Related posts brought to you by Yet Another Related Posts Plugin.
Tags: browser compatibility, css, css3, web design
Leave a Reply