CSS Transparency in All The Browsers

By -
There are many cross-browser issues and transparency is one of the weird issues among them. All the browsers treat transparency in a different way to overcome this issue we need to define three different properties. The below properties are specific to a browser. .trans{ opacity: 0.5; filter:alpha(opacity=50); -moz-opacity:0.5; filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50); -khtml-opacity: 0.5; -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”; } Here is what each of those CSS properties is for:
  • opacity: 0.5; This is the “most important” one because it is the current standard in CSS. This will work in most versions of Firefox, Safari, and Opera. This would be all you need if all browsers supported current standards. Which, of course, they don’t.
  • filter:alpha(opacity=50); This one you need for IE.
  • -moz-opacity:0.5; You need this one to support way old school versions of the Mozilla browsers like Netscape Navigator.
  • -khtml-opacity: 0.5; This is for way old versions of Safari (1.x) when the rendering engine it was using was still referred to as KTHML, as opposed to the current WebKit.
  • filter:progid:DXImageTransform.Microsoft.Alpha; This is for IE 5 or later.
  • -ms-filter: "progid:DXImageTransform.Microsoft.Alpha"; this one you need for IE8

CSS fix for PNG transparency in IE6 and Mozilla

Semi-transparent backgrounds are nice. They would be more popular, but Internet Explorer doesn't support .png transparency. There are a few clunky workarounds. Here's another that's a little less clunky. for this technique you have to need 2 images. 1. background.jpg 2. trans-bg.png (image should be transparent). CSS Code .trans_1 { font-family:tahoma; font-weight:bold; padding:50px; border:solid 3px #00ff00; /* Mozilla ignores crazy MS image filters, so it will skip the following */ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='/ trans-bg.png'); } /* IE ignores styles with [attributes], so it will skip the following. */ .trans_1[class] { background-image:url(/trans-bg.png); } HTML <div style="float:left;background-image:url(/background.jpg);border:solid 3px #000;padding:10px;"> <div style="float:left;"> DesignDazzling.com. </div> <div style="float:left;"> TutorialsPalace.com. </div> <div style="float:left;"> <a target=”_blank” href="http://www.trendyshowcase.com"> Latest Websites Gallery</a> </div>

DesignDazzling is sharing interesting and useful content which is coming from skilled and relating to the topics like Blogging, creative designs, developer tools, free tutorials, useful web resources, CSS, Fonts, WordPress, Tutorials, Web Designing, HTML, Inspiration, Free Templates, online Freebies for web designers and web developers.

11 Comments to CSS Transparency in All The Browsers

  1. Nice simple clear article on CSS transparency. However, it’s worth noting that the hacks to get it to work in IE are extremely buggy, including it stopping links working (there are workarounds).

    There are also fairly substantial performance issues with the IE implementation (which can lead to odd behaviour and even severe crashing).

    Yahoo!’s performance work has suggested not using at all due to the performance reasons.

    For example, IE re-evaluates the page and draws transparent PNGs every time something on the screen changes, such as when your mouse moves across the browser!

  2. If you want transparent background colors, better use this approach:
    .foo{
    background-color:#ddd; /* fallback color for old browsers */
    background-color:rgba(255,255,255,.66);color:#808080; /* css3 transparency */
    filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=1, startColorStr=#aaffffff, endColorStr=#aaffffff); /* all IEs */
    }

  3. I love how all of them are pretty short in form…except for IE: -ms-filter:“progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”;

    Had to make it difficult eh?

Leave a Reply

Your email address will not be published. Required fields are marked *

Best Bootstrap Tutorials