【CSS】このページ･･･なんだか奥行きがあるぞ！と思わせるbox-shadow

CSS3のbox-shadowを利用してサイト上部に影を作り、ブラウザのUIよりページが奥にあるかのように見せるテクニックです。

このサイトはヘッダが黒いので、さっぱりわかりにくいのですが、ページ上部にCSSによるシャドーが、配置されています。
下の方にスクロールすると気付いて頂けるかと思います。

CSS

body上部に擬似要素で実際には表示されない領域を配置して、それにbox-shadowを当ててあります。

body:before {
    content:"";
    position:fixed;
    top:-10px;
    left:0;
    width:100%;
    height:10px;
    z-index:10;
    box-shadow:0 0 20px #333;
}

デモ

イメージはこんな感じです。

↑この表示自体CSS3で書いているので、モダンなブラウザで御覧ください。