上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

以下の画像の通り、コンテンツとブラウザの境界面にに影(ドロップシャドウ)を付ける方法です。
box-shadow

ちょっとしたところで、あまり目立ちはしませんが、こういうふうに影をつけるだけで、立体感がでてかなりいい感じになります。

方法は簡単、以下の通りのcssを追加するだけです。
HTML側を全く変更する必要がないので楽です。

body:before { 
content: "";
position: fixed;
top: -10px;
left: 0;
width: 100%;
height: 10px;
z-index: 100;
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
box-shadow: 0px 0px 10px rgba(0,0,0,.8);
}


【元ネタ】
How to create slick effects with CSS3 box-shadow
Related Posts

Thoughts on スポンサーサイトブラウザとの境界面に影(シャドウ)を付ける方法

Leave a Reply

* less than 16 characters
* less than 24 characters
* less than 16 characters
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。