ホームページ制作のヒントやTIPSを色々と書いています。

影をつけて立体的に見せる

ブログなんかでよくセンターの部分が立体的に見えるのがありますが、
画像を作って、CSSで指定します。

幅820px のgif 画像です。

以下のように設定します。


body {
margin: 0px; padding: 0px;
background: #FFFFFF url(<$MTBlogURL$>mt/img/bg.gif) repeat-y top center;
}

このサイトは、コンテンツが760pxなので、両側に10pxずつ余白を付けて
その横に20pxのグラデーションをグレーから白に外側に向けてつけました。

簡単な割には見栄えが良いので試してみては!