Geeks With Blogs

@neh123us
  • neh123us T4 sould be your outsourcing strategy https://t.co/1ZceCUKWKE T4 - The Insource Code Monkey about 412 days ago
  • neh123us Had a need for Dynamic Views in MVC today. Wanted to use a Partial view on two different views with different ViewModels about 461 days ago

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 {

content:"";

position:fixed;

top:-10px;

left:0;

width:100%;

height:10px;

-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: GeeksWithBlogs.net | Join free