ホームページの枠に影をつけたいのです。

質問

はじめまして。
現在ホームページを作成しています。

そこでよく見かけるホームページの枠にドロップシャドウのような影をつけたいのですがどうすればいいのでしょうか？

参考サイト
http://www.plastiq.jp/

画像を配置すればいい。という記述を見かけたのですが、どこにどのようにしてどのような画像を張ればいいのかわからず、困っています。

どうかよろしくお願いいたします。

回答No.1

leap_day · ベストアンサー

こんにちは

色々やり方はあるとは思いますけど・・・
（border:1px solid;は削除）

・コンテンツの背景画像として貼り付け
<style type="text/css"><!--
#sample {
width:800px;
height:600px;
margin:auto;
border:1px solid;
background-image:url(shadow.gif);
background-repeat:repeat-y;
background-position:right;
}
--></style>

<div id="sample">&nbsp;</div>

・画像のみのブロックをコンテンツの隣に貼り付け
（borderを削除すれば全体を覆っているdivのwidthは810pxでいいです。border分があるので812pxになってます）
<style type="text/css"><!--
#sample {
width:800px;
height:600px;
border:1px solid;
float:left;
}
#sample1 {
width:10px;
height:600px;
background-image:url(shadow.gif);
background-repeat:repeat-y;
float:left;
}
--></style>

<div style="width:812px;margin:auto;">
<div id="sample">&nbsp;</div>
<div id="sample1">&nbsp;</div>
</div>