Comments on: Cross-Browser Compatible CSS Opacity

By: Leo

Leo — Sat, 31 Oct 2009 23:30:58 +0000

To make it AND valid, AND ok for IE, AND ok for Safari, AND ok for moz, AND etc….

/**/

(I hope all the code came trough)

By: Tony

Tony — Sat, 03 Oct 2009 23:02:07 +0000

Neat, but does not comply to standards. Using a semi-transparent 1×1 px gif and a little absolute positioning does the trick for me :)

By: Paul

Paul — Mon, 03 Aug 2009 21:46:58 +0000

This is pretty well documented and used often. It’s a cool feature that deserves attention, but calling it “overlooked for quite some time” is stretching too far in my opinion.

By: ajay

ajay — Sun, 02 Aug 2009 08:46:16 +0000

heiy…it’s work for in all my testing browsers (firefox, IE:using IETester,opera,safari windows and chrome). thanx david! :)

By: Ross Bearman

Ross Bearman — Tue, 16 Jun 2009 22:33:35 +0000

Rich, the .show-50 is simply the class name, you can change this to whatever suits you. To implement this you’d use the following HTML:

Content

Where “Content” is whatever you want in the container. If you changed the CSS to .opaque-text, you’d simply use:

Content

By: Rich Boy

Rich Boy — Wed, 10 Jun 2009 00:24:49 +0000

So, how exactly do I use this?

.show-50 – How can I apply this to specific tags? If I change it to .opaque-text {css here} will it work, or does that .show-50 part make it work?

By: Pierce O' Broin

Pierce O' Broin — Fri, 24 Apr 2009 11:38:56 +0000

Thanks for the suggestion but this rule can BREAK IE. I used it in conjunction with a large amount of javascript (and jquery) and it apparently caused a memory leak. BEWARE!!!!

By: kovshenin

kovshenin — Mon, 16 Feb 2009 17:40:00 +0000

Thanks. Helped a lot ;)

By: Victor De la Rocha

Victor De la Rocha — Wed, 14 Jan 2009 04:02:33 +0000

Thank you very much! :)

By: Leith Bade

Leith Bade — Tue, 09 Sep 2008 20:42:30 +0000

For IE 8 that code needs to be changed to:

.show-50 { -moz-opacity:.50; -ms-filter:”alpha(opacity=50)”; filter:alpha(opacity=50); opacity:.50; }

And to support old 1.x versions of Safari:

.show-50 { -khtml-opacity:.50; -moz-opacity:.50; -ms-filter:”alpha(opacity=50)”; filter:alpha(opacity=50); opacity:.50; }

See http://blogs.msdn.com/ie/archive/2008/09/08/microsoft-css-vendor-extensions.aspx