Andrea Olivato’s Blog

This is a quick tip about obtaining a nice looking effect of shadow while scrolling. Using css and a partially transparent background png it is possible to simulate a shadow in the lowest part of your website/blog, giving the input to the user about scrolling the page to read the semi-hidden content.

The code has been tested with recente Gecko based browsers (FirefoxFirefox 2.0+ , Epiphany <2.26) , Webkit ones (ChromeChrome 2.0+ , Safari 3+, ), Opera and 7+.

Css

Put following code inside your website CSS.

#shadower{
    background:transparent url(images/shadower.png) repeat-x scroll 0 0;
    bottom:0;
    display:block;
    height:110px;
    margin:0 auto;
    overflow:visible;
    position:fixed;
    width:100%;
    z-index:10000;
}

Html

The following markup has to be put in the footer of your page, before the end of the < /body>tag

<div id="shadower"></div>

Image

Please download the shadower.png image and put it on your images folder. If you need to change the path, remember to change the css code too.

Demo

You can see a demo of this code in this blog, even if there’s a bottom bar over the shadow.  Below there’s an explaining image.