Top Results





Tag Cloud


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 Sad, but its the only way I currently know of for getting the transparent effect working with a range or browsers Smile. If anyone else has a better way feel free to leave me a comment.

The CSS that creates the transparent effect is below.

.Transparency {

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 Smile.

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.

Transparency Demo

Thanks for reading and I hope it comes in use Big Grin



19th May, 2009 at 9:46 am

Nice effect. Always wanted to know how that was done Big Grin :D

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 Big Grin :D

23rd August, 2009 at 5:40 pm

Hello. And Bye.

27th September, 2010 at 12:50 pm

I randomly browse blogs on the internet, and I discover your article to be very informational. I' ve already bookmark it on my browser, so that I can view your blog post once more later. Also, I' m wondering whether or not your weblog is open for link trade, as I really need to trade hyperlinks with you. I don' t usually do that, however I hope that we will have a mutual hyperlink exchange. Let me know and have an amazing day!

29th October, 2010 at 11:16 pm

the useful information you provided helped our team's investigation for my group, appreciate that.

- Lucas

30th October, 2010 at 12:16 pm


I'm always open for link exchanges, but I would need to check out your site first.

Get in contact with me and include a link to your site Smile :) I'll get back to you on if we can go ahead and exchange links


06th December, 2010 at 10:07 pm

I like reading your site because you can always bring us fresh and awesome stuff, I feel that I must at least say a thank you for your hard work.

- Rob

03rd March, 2011 at 5:49 am

hi, good site very much appreciatted

22nd March, 2011 at 12:59 pm

Just saying hello, hope this was the right section and that I will enjoy it here


01st April, 2011 at 2:17 am

I guess you may want to add a facebook icon to your website. I just bookmarked the site, although I must make this by hand. Simply my $.02 Smile :)

Name Required

(Not Displayed)

Invalid Email
Message Required

CAPTCHA Image Reload the captcha image

Recent Comments

» Pat


» chris

Hi, thanks for this...

» Anderson

Wao! I know it has been...