CSS Transparency in All The Browsers

Posted on 11. Jan, 2010 by admin in 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.

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

  • Stumbleupon
  • Delicious
  • Google Buzz
Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • del.icio.us
  • StumbleUpon
  • Reddit
  • DZone
  • Facebook
  • LinkedIn
  • Mixx
  • Propeller
  • BlinkList
  • Design Float
  • Furl
  • Google Bookmarks
  • Live-MSN
  • MySpace
  • NewsVine
  • Sphinn
  • Technorati
  • TwitThis
  • YahooBuzz
  • email

Random Posts

Related posts:

  1. New Look of 30 Most Popular Logos
  2. 5 Grunge Themes
  3. Best Photoshop Text Effects – I
  4. Web 2.0 Round-Up Effects
  5. Sweet and Cute Kids With Dazzling Graphics



29 Responses to “CSS Transparency in All The Browsers”

  1. CSS Transparency in All The Browsers | Design Dazzling | Drakz Free Online Service

    11. Jan, 2010

    [...] more: CSS Transparency in All The Browsers | Design Dazzling Share and [...]

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

  3. honour chick

    12. Jan, 2010

    thxs for the info

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

  5. Tweets that mention CSS Transparency in All The Browsers | Design Dazzling -- Topsy.com

    13. Jan, 2010

    [...] This post was mentioned on Twitter by CEO of Great Innovus, bkmacdaddy designs, Saurabh Shah, Steve Johnathan, Nathan Strik and others. Nathan Strik said: RT @joostvanveen: CSS Transparency in All The Browsers – http://bit.ly/8i82pU /via @bkmacdaddy [...]

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

  7. CSS Transparency in All The Browsers | Design Dazzling » Web Design

    21. Jan, 2010

    [...] CSS Transparency in All The Browsers | Design Dazzling [...]

  8. Rishi Luchun

    21. Jan, 2010

    Thanks, was looking for this the other night!

  9. CSS Transparency in All The Browsers | Design Dazzling « Netcrema – creme de la social news via digg + delicious + stumpleupon + reddit

    21. Jan, 2010

    [...] CSS Transparency in All The Browsers | Design Dazzlingdesigndazzling.com [...]

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

  11. CSS Transparency in All The Browsers | Design Dazzling : Popular Links : eConsultant

    21. Jan, 2010

    [...] this link: CSS Transparency in All The Browsers | Design Dazzling 11 January 2010 | Uncategorized | Trackback | del.icio.us | Stumble it! | View Count : 0 Next [...]

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

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

  14. hugo

    21. Jan, 2010

    w3c?

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

  16. 浏览器的 css 透明属性 « 鹏讯科技

    21. Jan, 2010

    [...] 英文原文： CSS Transparency in All The Browsers 0 类别： [...]

  17. links for 2010-01-21 « Stand on the shoulders of giants

    22. Jan, 2010

    [...] CSS Transparency in All The Browsers | Design Dazzling (tags: css webdesign) [...]

  18. Mes favoris du 20-01-10 au 22-01-10 » Gilles Toubiana

    22. Jan, 2010

    [...] CSS Transparency in All The Browsers | Design Dazzling  [...]

  19. pharmacy technician

    23. Jan, 2010

    nice post. thanks.

  20. links for 2010-01-23 » 4exp.net

    23. Jan, 2010

    [...] CSS Transparency in All The Browsers | Design Dazzling (tags: css webdesign browser background html crossbrowser) [...]

  21. Pup Inc’s Arrow Over Lay Screen Shot Browers Explained | AboutBrowsers.info

    25. Jan, 2010

    [...] CSS Transparency in All The Browsers | Design Dazzling [...]

  22. Mes favoris du 22-01-10 au 25-01-10 » Gilles Toubiana

    25. Jan, 2010

    [...] CSS Transparency in All The Browsers | Design Dazzling  [...]

  23. video | ClickLogin Web Design

    25. Jan, 2010

    [...] CSS Transparency in All The Browsers [...]

  24. Pattern Inc » Fresh CSS Tips, Techniques and Tools

    25. Jan, 2010

    [...] CSS Transparency in All The Browsers [...]

  25. Fresh CSS Tips, Techniques and Tools | Programming Blog

    26. Jan, 2010

    [...] CSS Transparency in All The Browsers [...]

  26. Esta semana en Twitter: 30-01-2010 | ceslava - Diseño y Formación

    30. Jan, 2010

    [...] Transparency in All The Browsers | Design Dazzling http://www.designdazzling.com/2010/01/css-transparency-in-all-the-browsers/ [...]

  27. Css transparence dans tous les navigateurs

    17. Feb, 2010

    [...] Il ya de nombreuses questions de la Croix-navigateur et la transparence est l'une des questions bizarres parmi eux. Tous les navigateurs traiter la transparence d'une façon différente de remédier à ce problème dont nous avons besoin de définir trois propriétés différentes. Les propriétés ci-dessous sont spécifiques à un navigateur.. trans (opacity: 0. 5; filter: alpha (opacity = 50);-moz-opacity: 0. 5;: filtre progid: DXImageTransform. Microsoft. Alpha (opacity = 50);-khtml-opacity: 0. 5;-ms-filter: "progid: DXImageTransform. Microsoft. Alpha (opacity = 50) ";) Voici ce que chacune de ces propriétés CSS est pour: opacité: [. . . ] Related posts: New Look de 30 Most Popular Logos 5 Thèmes Best Grunge Photoshop Text Effects – I URL article original: http://www.designdazzling.com/2010/01/css-transparency-in-all-the-browsers/ [...]

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

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

Leave a Reply

Get Adobe Flash playerPlugin by wpburn.com wordpress themes