Geeks With Blogs

News Google

Nick Harrison Blog<Nick>.Next()

This is a subtle trick to add some depth to your page. By adding a drop shadow across the top of your page, it looks like the page slides up under the toolbar.

Subtle affect but nice and easy to achieve. No changes needed to your page, and this can easily be added to any style sheet. Works with any browser with minimal CSS3 compliance.

body:before {







-webkit-box-shadow:0px 10px 20px rgba(0,0,0,.9);

-moz-box-shadow:0px 10px 20px rgba(0,0,0,.9);

box-shadow:0px 10px 20px rgba(0,0,0,.9);




A couple of things to make sure of:

You want the offset for the top to equal how far down the drop shadow goes. If you don't move it up enough, you might see the box. If you move it up too far, you might miss the shadow.

Play with the color to suit your theme as needed, and you are good to go:


Give it a try.

Posted on Friday, January 11, 2013 2:49 PM Stylish musings | Back to top

Comments on this post: Add a drop shadow across the top of your page.

comments powered by Disqus

Copyright © Nick Harrison | Powered by: