Home > Web > Web transparency

Web transparency


If a few years back, transparency was the cool kid in user interfaces, nowadays it’s a must if you want to have a user interface that is not dull and lives in the present.
And I’m talking here not only about desktop graphical interfaces, but also about web interfaces. With all the comotion about Web2.0 and web applications, transparency is something that you should definately see😉 in your web site.

But how to do it? The browsers wars will definately be a battle to take and win here. But to keep it simple, I’ll tell that there are three ways to do it: W3C, Internet Explorer and Mozilla.

  • W3C. If we will go to their site http://www.w3.org/TR/css3-color/#opacity we will see that the CSS property handling this is called opacity. The possible values are floats between 0 and 1, with 0 totally transparent and 1 totally opaque. The intermediate values represent different levels of transparency.

    But you probably noticed that this is a CSS version 3 property and unfortunately very few browsers supports it currently. Latest versions of Firefox do support this (I tested it with version 2.0.0.8).
  • Mozilla. In Mozilla the things are the same, but the name of the CSS property is different: -moz-opacity. As this is an obsolete way, you should prefer the CSS3 property and use this only for backward compatibility.
  • Internet Explorer. Here things are a little bit more complicated. You should use the filter property and the Alpha. As I said, a little bit more complicated, that’s why here’s below a code sample:

    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);

    The opacity argument can have integer values between 0 and 100, with 0 totally transparent and 100 totally opaque.

And this is for CSS. But what if you want, e. g. to create a fade in/fade out effect and to dinamically modify the transparency? Then you should simply use JavaScript and I think the best way to explain how it is through code samples.

  • W3C method:

    element.style.opacity = opacity;

  • Mozilla method:

    element.style.MozOpacity = opacity;

  • Internet Explorer method:

    element.style.filter = 'alpha(opacity=' + (opacity * 100) + ')';

In these samples, the opacity parameter value has the same semantic as in the CSS3 case. Please note that in the IE code sample this value is multiplied by 100.
And now if we put all these together we have cross browser methods for getting and setting the transparency of an HTML element:

function getOpacity(element) {
    var v = element.style.opacity;
    return ((v == null || isNaN(v)) 
            ? 1 : element.style.opacity);
}

function setOpacity(element, opacity) {
    if (opacity < 0)
        opacity = 0;
    if (opacity > 1)
        opacity = 1;
    element.style.opacity = opacity;
    
    if (document.getElementById("ie").checked 
            && (element.style.filter != undefined))
        element.style.filter = 'alpha(opacity=' 
                + (opacity * 100) + ')';

    if (document.getElementById("moz").checked 
            && (element.style.filter == undefined))
        element.style.MozOpacity = opacity;
}

You can see these samples working here.

  1. eric
    April 8, 2008 at 2:50 am

    I like the way you explain things. Very clear and concise. Thanks.

  2. Qasim Ali
    July 26, 2009 at 10:22 am

    Great work done

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: