Fun With Opacity of Div Layer

Sometimes we don’t want visitors clicking on some links while the contents are loading up, for example, loading contents from database.  Under this circumstances, a good solution is using a Div layer to cover the contents while the contents are loading up.

However a Div layer is not transparent by default. In this case, the visitors will be very worry if the contents were covered up. A good idea is making the Div layer semi-transparency. This is shown in the example below:

In the example above, the text “Contents below” is actually under the grey div layer. The overall webpage design concept is that:

  1. The grey Div layer is sliding down.
  2. The contents below the grey Div layer is then covered up, preventing visitors clicking on the links of the contents.
  3. The webpage is doing something.
  4. The grey Div layer will be removed after all actions are finished.

The semi-transparency effect of the sliding down Div layer is simply setting the opacity properties on the stylesheet:

#panelCover {
    position: absolute;
    height: 0px;
    width: 255px;
    z-index: 30;
    top: 25px;
    left: 25px;
    padding: 0px;

    opacity: 0.50;

    filter: alpha(opacity=50); /* fix IE bug */

    background-color: #999;
    margin-bottom: 250px;

}

This technique is quite commonly used in web page design recently.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>