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:
- The grey Div layer is sliding down.
- The contents below the grey Div layer is then covered up, preventing visitors clicking on the links of the contents.
- The webpage is doing something.
- 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