Code Snippet
Cross Browser Opacity
.transparent_class {
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* IE 5-7 */
filter: alpha(opacity=50);
/* Netscape */
-moz-opacity: 0.5;
/* Safari 1.x */
-khtml-opacity: 0.5;
/* Good browsers */
opacity: 0.5;
}
Actually missed the IE8 opacity brouhaha. Thanks for including that!
Yep. I didn’t know about that one either. The only issue I have with this snippet is that it’s not valid CSS.
Nevertheless, I’m gonna use it.
Usefull :) Thanks!
attention – sequence
.yourselector {
background:#000;
opacity: .75; /* standard: ff gt 1.5, opera, safari */
-ms-filter: “alpha(opacity=75)”; /* ie 8 */
filter: alpha(opacity=75); /* ie lt 7 */
-khtml-opacity: .75; /* safari 1.x */
-moz-opacity: .75; /* ff lt 1.5, netscape */
}
If you want opacity to also work in IE8′s emulating IE7 mode, the order should be:
-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”; // first
filter: alpha(opacity=50); // second
If you don’t use this order, IE8 emulating IE7 doesn’t apply the opacity, although IE8 and IE7 native do.
What about keeping the text inside the layer normal?
yeah! I’m wondering how to do this too..
If you set a parent container to an opacity less than 100%, all of its children will also be less than 100%, not because it cascades, but because the parent is dimmed. If the parent is dimmed to 75%, even if you give the child 100% opacity, it will only be 100% of 75%, which is 75%.
What I do is just use a semi-transparent PNG as a background image for the parent, and then the children can have full opacity.
inb4 IE6 doesn’t render 24bit pngs… Eff ie6, I’m done pandering to ie6, and enabling everyone who still uses it. The use of a semi transparent png is not going to break the site, but it will certainly affect the prettyness, which is all the more reason for people to upgrade.
You need to prevent the style from cascading… you need to wrap your text in an element with an opacity of 100.
I was wrong: http://css-tricks.com/non-transparent-elements-inside-transparent-elements/
I find that I use this snippet more than any other on the site. Thanks! =D
Is this ok for IE9?
thanks for update coded^^
Awesome “Submit Comment From”. Congratulations, the best i have ever find surfing in the internet world for years…
But I have one question…
Why all of you “webmasters”, keep asking email , hum??? If i want an answer I just put my email or even better I contact you. If not I will just SIMPLY LIE! And use one like this one: dfbjhsbdjfhbsdjfhbdsjhfbsd@gmail.com
Take off this “required fields”. I hate this mass standardization and globalization, it’s so kitsch and so predictable, is a false sentence to evoke a mystified concept from it.
Webmasters ask for emails to help identify spam, as well as uniquely identify users. If you don’t want to enter your email, then have faith that your posts will be removed as spam, and that you really can’t contribute, because you’re not anything more than a few “asdf”s
I LOLD when i read the “good browsers” thing
good information, very helpful. Thanks..
@asdasdasd: you should view this awesome submit form in IE8.
I tryed this on a PNG but then it get a black bar arround it.
Thanks this is a big help!
As Chris wrote here: http://css-tricks.com/64-css-transparency-settings-for-all-broswers/
Use the following anno 2011:
DigWP
A book and blog co-authored by Jeff Starr and myself about the World's most popular publishing platform.
Quotes on Design
Design, like Art, can be an elusive word to define and an awfully fun thing to have opinions about.
HTML-Ipsum
One-click copy to clipboard access to Lorem Ipsum text that comes wrapped in a variety of HTML.
Bookshelf
Hey Chris, what books do you recommend? These, young fertile mind, these.