Thursday, August 5, 2010

CSS Transparency Effect for All Browsers

Another interesting property of CSS or Cascading Style Sheets is transparency. Like the border radius property, which you can see on my post about CSS rounded corners with no images, this is treated differently in all browsers. It will take a four statements to completely make transparency effect in all browsers. But you don't have to worry on this statements because they will not interfere with each other. Below is the CSS statements for a class to make a 50% transparency effect.


.transparent_class {
    opacity: 0.5; /* standard CSS */
    filter:alpha(opacity=50); /* Internet Explorer */
    -moz-opacity:0.5; /* Mozilla Firefox */
    -khtml-opacity: 0.5; /* Safari */
}

No comments:

Post a Comment