Tuesday, March 02, 2010

The Overlay Technique ( HTML & CSS )

I have grown fond of the 'overlay technique' used in many sites around the web.
Here I detail how it is done, with cross browser compatability (Tested on IE6 to FF3).

The overlay technique enables one to divert the attention of the user to a dialog or message while still on the same page. This is useful if you would like to create your own custom but much more advanced ALERT dialog.

Here we go:


1) Setup a DIV in the BODY tag in your HTML, give it an ID of 'overlay' like so,


    <div id="overlay"></div>


2) Enter the following CSS in the HEAD section of your HTML,
      body, html {
        padding: 0px;
        margin: 0px;
    }
   
    #overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #000;
            opacity: 0.8;
            filter: progid:DXImageTransform.Microsoft.Alpha(opacity = 80);
            z-index: 2;
        }


3) Save your page and that is it. Reload your page to see the overlay.


The complete HTML should look as follows:


<html>
    <head>
        <title>Testing the 'Overlay Technique'</title>
        <style type="text">
       
        body, html {
            padding: 0px;
            margin: 0px;
        }
       
        #overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #000;
            opacity: 0.8;
            filter: progid:DXImageTransform.Microsoft.Alpha(opacity = 80);
            z-index: 2;
        }   
        </style>
    </head>
    <body>   
        <h1>Testing the 'Overlay Technique'</h1>
        <div id="overlay"></div>
    </body>
</html>


Some points to note.

1) If you are dynamically creating the overlay i.e. via JavaScript, for this to work in IE, you should do the following:


overlayObject.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity = 80)";
   
'overlayObject' being the 'overlay' object. If you are a jQuery user like me you can do the following,


$('#overlay').css({ filter : "progid:DXImageTransform.Microsoft.Alpha(opacity = 80)"});


2) Some browsers insert padding to the body element and therefore your overlay will not cover the screen completely, the rule;


body, html {   
     padding: 0px;
     margin: 0px;
}


takes care of that.


3) To change opacity, alter the 'opacity' to any value you would like below 1, 1 being 100% opacity, so 0.8 would translate to 80% and so on. The lesser the value the lighter the opacity. Remember to set the same value in 'filter' for IE compatability, however you have to multiply it by 100. So,


opacity : 0.7; - (FF/Safari/Opera)
filter : progid:DXImageTransform.Microsoft.Alpha(opacity = 70);

4) Background is the color that you would like the overlay to be. Set it to whatever color you would like.
5) z-index is the stacking order of the elements on your page. Always set this to 1 value greater than the computed z-index value of the highest placed element.

posted by generalSpecific at 12:19 PM

0 Comments:

Post a Comment

<< Home