このブログにも導入されていますがブログなどの全体のレイアウトの枠に影のような物を表示させる方法を紹介します。実はこれの仕組みは結構シンプルで高さ1pxの画像を縦に並べてるだけなんです。
まずは画像を用意します。
仮にレイアウトの幅が1024pxだった場合は1024px*1pxの影用の画像（1054px*1px）を用意します。
影をつけたいところ全体に適当なクラスを付けた<div></div>で囲みます。
<html>
<head>
<title></title>
</head>
<body>
<div class="kage">
~コンテンツスペース~
</div>
</body>
</html> |
cssを追加します。
/*影のcss*/
.kage {
margin: 0 auto;
width: 1054px; /*作成した影画像の横幅に合わせる*/
background: url(画像のURL) repeat-y center top;
}
|
こんな感じでokです。
影をつけるだけってのはあまり派手な演出ではありませんが何も無いチープな感じが若干和らぐ感じがします。
PR
