cssでコンテンツと背景の間に影を付ける

質問

http://www.club-barbarian.com/index.html

↑のHPのように、コンテンツ部分と背景部分にcssを利用して影をつけるにはどのようにすればよろしいでしょうか？

よろしくお願いします。

回答No.1

o84 · ベストアンサー

サイトを見てみました。
ご質問は、画面左右端の影のことですね？

これは、影の画像でつけています。

まず、
http://www.club-barbarian.com/index.html
の画面が、以下の構造になっています。
-----------------------------------
<table width="780" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td class="main_left">&nbsp;</td>
<td>ここに色々書いてある。</td>
<td class="main_right">&nbsp;</td>
</tr>
</table>
-----------------------------------

次に、上記画面で使っているスタイルシート
http://www.club-barbarian.com/style.css
を見ると、その中に以下の記述があります。
-----------------------------------
.main_left {
background-image: url(image/bg_left2.jpg);
background-repeat: repeat-y;
width: 15px;
background-position: right top;
margin: 0px;
padding: 0px;
}

.main_right {
background-image: url(image/bg_right2.jpg);
background-repeat: repeat-y;
width: 15px;
background-position: left top;
}
-----------------------------------

「bg_left2.jpg」「bg_right2.jpg」というのが影の画像です。

お礼

回答ありがとうございます。

いろいろやってみます。
ありがとうございました。