The Article
Cross-Browser Compatible CSS Opacity
Playing around in Photoshop, I understand the role that opacity can play in the design of an image. Why can’t we take that over to the web? CSS opacity has been overlooked for quite some time and there doesn’t seem to be one solid, cross-browser solution to the problem. Over the past day or two I’ve been looking at ways to create opacity in images WITHOUT using javascript. This worked for me using images and DIV elements.
.show-50 { -moz-opacity:.50; filter:alpha(opacity=50); opacity:.50; }
Example
The downside to the above code, of course, is that it’s not great when it comes to standards. As a developer though, I know that the most important thing is that it works! Tested in IE6, IE7, Firefox 2+, Safari, and Opera 9.
About This Legendary Post
Written and posted by on Thursday, August 9, 2007 @ 11:59 am
Sugar: CSS / Design
Related Posts
- CSS Image Filters in Internet Explorer
- Cross Browser CSS Min-Height
- Using MooTools For Opacity
- Weekend Links - Opera, IE7.js, PHP RSS Parsers, Network Solutions Steals Domain Ideas, Eclipse and PHP, Cross-Site XMLHttpRequest
- Weekend Links - jQuery 1.4, CSS Images, Printing Techniques, Converting to CSS, Cross-Browser Coding
2 Quality Comments
Be Heard!
Your email is never published nor shared. Required fields are marked *.
Feeds & Profiles
Sponsors
Site Search
Discussion Topics
Script & Style
List WordPress Users - Custom Query jQuery tableSorter and quickSearch Plugins Together Demo Designing, Working, and Ethics In UI Design, the “Obvious” Solution isn’t Necessarily the Best Solution The Soul Of The Web - Why Ajax Standards Matter Tutorial - CakePHP Ajax “Quick Save” with jQuery Momentum CSS Framework Released Flexigrid for jQuery 40+ CSS Generators De-clutter Your Interface With Hover Controls
11:10 am
plasebo says:
The only drawback with CSS opacity is that the text inside the div is blurred as well. Adding more opacity to the text inside the dic container do not solve the problem.
css-tricks.com doucmented this issue and found a solution to this problem.
3:42 pm
Leith Bade says:
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