CSS Transparency in All The Browsers


Posted on 11. Jan, 2010 by in CSS, Graphics, Tools

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.

Related links


.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>



Random Posts

Hello there! If you are new here, you might want to subscribe to the RSS feed for updates on this topic, or follow us on Twitter. Get promotion with Hypesol.
Name: Email:

16 Responses to “CSS Transparency in All The Browsers”

  1. uberVU - social comments

    11. Jan, 2010

    Social comments and analytics for this post…

    This post was mentioned on Twitter by bkmacdaddy: CSS Transparency in All The Browsers – http://bit.ly/8i82pU...

    Reply to this comment

  2. honour chick

    12. Jan, 2010

    thxs for the info

    Reply to this comment

  3. Inside the Webb

    12. Jan, 2010

    Working with CSS transparency in all browsers can be tough. You’ve got a great post here with some really useful tips, thanks for sharing man!

    Reply to this comment

  4. Trackback Submitter

    17. Jan, 2010

    Post trackbacks and comments to remote blogs automatically with Trackback Submitter! This tool will submit your comments to millions of blogs automatically. Trackback Submitter – the most powerful tool on the planet to submit trackbacks automatically!

    Reply to this comment

  5. Rishi Luchun

    21. Jan, 2010

    Thanks, was looking for this the other night!

    Reply to this comment

  6. Apple Marketing

    21. Jan, 2010

    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!

    Reply to this comment

  7. Veit

    21. Jan, 2010

    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 */
    }

    Reply to this comment

  8. Joakim Eriksson

    21. Jan, 2010

    Thanx for your post. It’s always good with knowledge on how to fool the browsers design-wise.

    Good work!

    Reply to this comment

  9. hugo

    21. Jan, 2010

    w3c?

    Reply to this comment

  10. Andrew

    21. Jan, 2010

    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?

    Reply to this comment

  11. pharmacy technician

    23. Jan, 2010

    nice post. thanks.

    Reply to this comment

  12. You are now listed on FAQPAL

    26. Feb, 2010

    CSS Transparency in All The Browsers…

    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….

    Reply to this comment

  13. Dave

    02. Mar, 2010

    Hey, would you like to submit comments and backlinks to millions of blogs automatically? Blog Comment Poster will do it for you. Blog Comment Poster will increase your traffic, backlinks and earnings dramatically! Sounds cool? Yes, it is cool! It’s the best automated comments posting tool on the Internet with many advanced features. Check it out!

    Reply to this comment

  14. Automatic Scuttle Submitter

    19. Mar, 2010

    Automatic Scuttle Submitter is 100% automatic social bookmarking software designed to submit your domains to thousands of Scuttle sites. Not only Automatic Scuttle Submitter creates accounts and bookmarks sites automatically, but also parses meta tags for each URL and runs itself in background without any user interaction.

    Reply to this comment

  15. Erik Landvall

    29. Mar, 2010

    You say:
    -ms-filter: “progid:DXImageTransform.Microsoft.Alpha”; this one you need for IE8

    I found this link where they talk about 5,5 and later, but NOT IE8 if you read the comments..

    http://msdn.microsoft.com/en-us/library/ms532967%28VS.85%29.aspx

    Reply to this comment

  16. hire website designer

    08. Sep, 2010

    thanks buddy for sharing code

    Reply to this comment

Leave a Reply


Advertise with us!
Partly powered by CleverPlugins.com