CSSでの影の付け方
http://radiocaroline.jp/
上記のサイトのようにコンテンツ表示領域と
背景領域の間のグラデーション部分はどのように
設定すればいいのでしょうか?
現在真ん中780px固定で左右を背景画像にしてます。
<style type="text/css">
<!--
body {
background: #000000;
margin: 0px;
padding: 0px;
text-align: center;
color: #ffffff;
background-color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
background-image: url(images/bg.gif);
background-repeat: repeat;
}
.oneColFixCtrHdr #container {
width: 780px;
background: #000000;
margin: 0px auto;
text-align: left;
}
.oneColFixCtrHdr #header {
padding: 0px;
background-color: #000000;
}
.oneColFixCtrHdr #header h1 {
margin: 0px;
padding: 0px 0px;
}
.oneColFixCtrHdr #mainContent {
padding: 0px;
background-color: #000000;
}
.oneColFixCtrHdr #footer {
padding: 0px;
background-color: #000000;
}
.oneColFixCtrHdr #footer p {
margin: 0px;
padding: 5px 0px;
}
#left {
background-color:#000000;
width:530px;
float:left;
}
#right {
background-color:#000000;
width:250px;
float:left;
}
.style2 {
color: #FFFFFF;
font-size: 80%;
}
.style1 {font-size: 60%;
color: #CCCCCC;
}
.style6 {color: #CCCCCC}
.style7 {font-size: 70%}
-->
</style>
お礼
添付画像が左右共にあります。 つまり、両サイドに影を付けたいと思っています。 コンテンツの横幅と同じにして、その部分を異なる画像にすると背景画像としても使えますね。(白だと両サイドの影だけとして使えますね)