New Bookstore! Save 20% on books with discount code: LAUNCH
Web Dev + WordPress + Security

Cross-Browser Transparency via CSS

Shortest post ever! You can quickly and easily apply transparency to any supportive element by adding the following CSS code your stylesheet:

selector {
	filter: alpha(opacity=50); /* internet explorer */
	-khtml-opacity: 0.5;      /* khtml, old safari */
	-moz-opacity: 0.5;       /* mozilla, netscape */
	opacity: 0.5;           /* fx, safari, opera */
	}

Check the code comments to see what’s doing what, and feel free to adjust the level of transparency by editing the various property values. Also, remember to replace “selector” with the target element of your choice.

By the way, I’ve got a metric tonne of juicy CSS posts scheduled for the next few months. So whatever you do, stay tuned!

Jeff Starr
About the Author
Jeff Starr = Creative thinker. Passionate about free and open Web.
Banhammer: Protect your WordPress site against threats.

22 responses to “Cross-Browser Transparency via CSS”

  1. TaiPhanMem.org 2009/01/28 4:23 am

    This CSS is good, but it has a small problems with validating. It is not validated by W3, causes of filter, -khtml-opacity and -moz-opacity attributes (W3 accepts only opacity attribute, and only in CSS3).

  2. Simon Sigurdhsson 2009/01/28 4:55 am

    For standards compliance, use only the last rule and have it fail in IE and some others, or use the fixed background trick if possible. (Is extensibility defined in CSS?)

  3. @ Simon Sigurdhsson :

    Conditional comments for IE should ensure standards compliance.

    Unfortunately, without using a browser detection script server-side or client-side to serve the non-standard CSS to Mozilla and kHTML, you’ll have to use CSS hacks to target these browsers.

    STL

  4. A trick for standard compliance?
    Different css loaded via CSS browser detection or XSLT! :)

  5. Simon Sigurdhsson 2009/01/30 3:01 pm

    @Cooltad: True, validation is not top priority, but IMO proprietary stuff should be avoided, since they lead to a non-standardized mess — making life difficult for everyone.

  6. @TaiPhanMem.org:
    Is proper validation really that big of a deal? I mean, seriously, what honestly matters is that the code works well with everything. Validation should be a secondary priority.

  7. Not to double-post but I managed to find the ‘blackhole’ link in Firefox by simply disabling CSS. So I’d prefer I don’t get banned. My IP starts with 76.111…

    You have fallen into a trap!

    There is nothing here for you. So what are you doing here? Go home. Our robots.txt file explicitly forbids your presence at this location.

    Please note that the following Whois data will be reviewed carefully. If it is determined that you suck, you will be banned from this site forever.

    76.111.!!.!!!
    Comcast Cable Communications, Inc. JUMPSTART-5 (NET-76-96-0-0-1)
    Comcast Cable Communications, Inc. DC-27 (NET-76-111-0-0-1)

    # ARIN WHOIS database, last updated 2009-01-29 19:10
    # Enter ? for additional hints on searching ARIN’s WHOIS database.

  8. Bill Brown 2009/01/31 1:36 am

    There’s also this lovely little collection:

    <style type="text/css">
    div.bg-trans
         {
              border:5px solid #000000;
              /* FF2 &amp; Opera Hack */
              background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAA1JREFUCNdjYGBgOAMAANEAzdAP7DMAAAAASUVORK5CYII=);

              /* Safari and FF3 support CSS3 syntax already */
              background:rgba(0,0,0,0.8);
         }
    </style>
    <!--[if IE]><style type="text/css">
    /* For Your IEs Only */
    div.bg-trans
         {
              background:transparent;
              filter:progid:DXImageTransform.Microsoft.gradient
    (startColorstr=#DD000000,endColorstr=#DD000000);
              zoom:1;
         }
    </style><![endif]-->

    Demo: http://www.webdevelopedia.com/better_opacity.html

  9. Jeff Starr

    That certainly works better than it looks! It would be great to merge these methods with those in the article to produce the “ultimate” cross-browser transparency article! Thanks for sharing Bill! :)

  10. Jeff Starr
    Jeff Starr 2009/02/03 9:28 am

    @Cooltad: No worries! I only blacklist the bad guys! ;)

  11. Hi just had a look at the opacity in i.e. and apparently there is a problem in getting it to work in both ie 7 and 8. They have a solution on
    www . quirksmode.org/css/opacity.html

    .opaque {
           // first!
           -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
           // second!
           filter: alpha(opacity=50);
    }

    I havent used i.e. 8 yet so its not a big problem but might as well fix things now for the future.

  12. Jeff Starr
    Jeff Starr 2009/02/08 9:45 am

    @khaled: Thanks for the tip — I will be sure to include that method in the next article on this subject :)

Comments are closed for this post. Something to add? Let me know.
Welcome
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
GA Pro: Add Google Analytics to WordPress like a pro.
Thoughts
LOL @ “weekly” support: “Your request has been received and will be reviewed soon. Neil (your support guy) checks support requests weekly. Rest assured we’ll get to it!” — Gotta be kidding with this.
After several days of work, finally taking a break. If anyone needs me, I'll be in Zora’s Domain, working thru Mah Eliya shrine.
Never ever call the client a useless idiot. Even if it’s true.
Inevitable that Google shuts down Feedburner. Maybe this year? Who knows. Here is a nice summary plus alternatives.
There is no way that Marvel can serve up anything better than what they've already done with Infinity saga/Endgame. Knowhere to go but down, sadly.
I built a new search launchpad to make my life easier. So I can search multiple engines quickly and easily.
Updating all muh plugins for WP 5.5 imminent release! Wut August :)
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.