News

Search

Top Results

Result

Bookmark

Share

Poll

Tag Cloud

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 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 {

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



Comments

Mill25

19th May, 2009 at 9:46 am

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

13th June, 2009 at 6:02 pm

The article is ver good. Write please more
GarykP

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

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
XRumerTest

23rd August, 2009 at 5:40 pm

Hello. And Bye.
coffee

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!
Lucas

29th October, 2010 at 11:16 pm

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

- Lucas
Ross

30th October, 2010 at 12:16 pm

Hey

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

Thanks
Rob

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
Be

03rd March, 2011 at 5:49 am

hi, good site very much appreciatted
Mike

22nd March, 2011 at 12:59 pm

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

Cheers
Mike
lora

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

Thanks.

» chris

Hi, thanks for this...

» Anderson

Wao! I know it has been...