Ghostly Compatibility: Cross Browser Transparancy with CSS

Posted: September 7th, 2009 | Author: Kurt | Filed under: Web Design | 13 Comments »

Easily make images disappear with this cross-browser compatible code snippet.

While CSS3 allows for a full range of effects (I’ve written some tips for CSS3 web and iPhone development), including transparency, the new selectors aren’t always compatible with a large variety of browsers. So, here’s a way to make text, sections, and images transparent with CSS.

To get around the lack of compatibility, I merely reproduce the same command in a variety of different ways. That way, if, for instance, the opacity command doesn’t work, the -moz-opacity selector might. Here’s a portion of the code snippet I used for the image above:

.transparent_class {
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}

filter:alpha

filter:alpha is compatible with Internet Explorer, and accepts values ranging from 0 to 100. 0 is a fully transparent element, and 100 is a fully opaque element.

-moz-alpha

-moz-alpha is compatible with Firefox, and accepts ranges from 0.0 to 1.0, in increments of 0.1.

-khtml-opacity

-khtml-opacity is used in Apple’s Safari, and in other KHTML-enabled browsers. Again, the scale is from 0.0 to 1.0, ranging in increments of 0.1.

opacity

opacity is the standard CSS3 selector. Use this when you are sure that the client or audience will be using a modern and standards-compliant browser.

Good luck making transparent images in your next web design. If you find these tips helpful, you should follow me on Twitter or subscribe to the RSS feed.

13 Comments on “Ghostly Compatibility: Cross Browser Transparancy with CSS”

1 devmarks.com said at 6:19 pm on September 7th, 2009:
Ghostly Compatibility: Cross Browser Transparancy with CSS…

While CSS3 allows for a full range of effects, including transparency, the new selectors aren’t always compatible with a large variety of browsers. So, here’s a way to make text, sections, and images transparent with CSS….
2 Russell Bishop said at 3:19 am on September 8th, 2009:
In your markup you use -moz-opacity:0.5; but in the comments after, you refer to it as -moz-alpha.

Which is correct?
3 jay said at 3:30 am on September 8th, 2009:
beautiful trick

thanks for sharing
4 Nix said at 4:57 am on September 8th, 2009:
@Russell,
-moz-opacity is.
5 Ghostly Compatibility: Cross Browser Transparancy with CSS – Cherrysave « Netcrema – creme de la social news via digg + delicious + stumpleupon + reddit said at 5:47 am on September 8th, 2009:
[...] Ghostly Compatibility: Cross Browser Transparancy with CSS – Cherrysavecherrysave.com [...]
6 Mes favoris du 7-09-09 au 8-09-09 said at 8:14 am on September 8th, 2009:
[...] Ghostly Compatibility: Cross Browser Transparancy with CSS – Cherrysave [...]
7 All Teched Up! « Caintech.co.uk said at 9:07 am on September 8th, 2009:
[...] Streets: Google Launching Online Version of Monopoly 12 brilliant 404 pages Blog Econsultancy Ghostly Compatibility: Cross Browser Transparancy with CSS – Cherry Twitter-Tools fr den Profi Tools, Twitter Dr. Web Magazin Hibernate Tutorial Geek & Mild by [...]
8 Thiago said at 9:30 am on September 8th, 2009:
Good option.

I prefer with jQuery, when it’s possible.

$(”.transparent_class”).css({’opacity’:'0.5′});
9 Kurt said at 9:41 am on September 8th, 2009:
Ah, I didn’t think about doing it with JQuery. Thanks for the tip, Thiago.
10 Sean said at 1:52 am on September 10th, 2009:
Why use jQuery though when CSS is available, and CSS is the presentation layer?
11 a complete one =) said at 7:53 am on September 10th, 2009:
.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;
}
12 Compartidos en el Reader said at 8:21 pm on September 11th, 2009:
[...] Beautiful Free Charts For Excel & Powerpoint. WP-Cache – Instalación en 7 pasos. Ghostly Compatibility: Cross Browser Transparancy with CSS. Mozy y la escala de almacenamiento digital. Escuela 2.0: la herramienta debería ser lo de menos. [...]
13 IE8 said at 1:20 pm on September 13th, 2009:
IE8 accept also

-ms-filter:alpha(opacity=70);