News
Search
Top Results
Result
Bookmark
Poll
Tag Cloud
cross-browser
css
transparencyone
features
ability
elements
transparent
opacity
property
element
widely
accepted
browsers
todays
post
show
simple
enable
compatible
Links
Cross-Browser CSS Transparency
02nd May, 2009
One of the new features in CSS 3 is the ability to make elements transparent by using the opacity property. For example opacity:0.5; would make the element %50 transparent. However this property is still not widely accepted by some browsers, IE 6 and 7 being two of them.
So for todays post I thought that I would show you some simple CSS that will enable you to have transparent elements that are compatible with most of todays common browsers. One down side to this however is that your CSS will not be W3C compliant
, but its the only way I currently know of for getting the transparent effect working with a range or browsers 
. If anyone else has a better way feel free to leave me a comment.The CSS that creates the transparent effect is below.
filter:alpha(opacity=50);
opacity: 0.5;
-moz-opacity:0.5;
}
To use the above code simply change the parameters to the level of transparency you want then apply the .Transparency class to the element you wish to make see through .
.I have put together a quick demo to show the class in action, click the "Disable Div Transparency" link to see the difference the class has on each div.
Thanks for reading and I hope it comes in use 
19th May, 2009 at 9:46 am
Nice effect. Always wanted to know how that was done
13th June, 2009 at 6:02 pm
The article is ver good. Write please more
16th June, 2009 at 3:32 pm
How soon will you update your blog? I'm interested in reading some more information on this issue.
16th June, 2009 at 5:40 pm
Hi Gary, will be updating my blog as soon as I possibly can, but am very busy at the moment. Thanks for your interest
23rd August, 2009 at 5:40 pm
Hello. And Bye.