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:
[css]
.transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
[/css]
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.
