CSSで背景とページの境界の枠に影をつけたい。

Question

表題どおりなのですが、
CSSで、背景とページの間の境界線に影をつけたいのですが、
やり方がわかりません。
参考までに以下のように、背景の灰色と、サイトの白の間の境界線にうすい黒い影をつけたいのです。
http://www.sanyo.co.jp/

テーブルならできるのですが、CSSだとちょっとわかりません。
詳しい方、恐れ入りますがご教授願います。

SAYKA · Accepted Answer

>影を
ドロップシャドウ・・・？

>テーブルなら
ああ、テーブルみたいなやつね
それは枠線の種類を指定すればできるよ。
テーブルで使われてるのは"ridge"じゃないかな
http://msugai.fc2web.com/web/CSS/border.html


ドロップシャドウは対応ブラウザの問題できびしい
http://www.google.com/search?lr=lang_ja&q=css%20%E3%83%89%E3%83%AD%E3%83%83%E3%83%97%E3%82%B7%E3%83%A3%E3%83%89%E3%82%A6

dezimac · Answer

テーブルと考え方は極端にかわらないのだけど、（両）端にぼかし影つけた画像用意して、背景に置いて、マージン等でその部分が見えるように調整するだけです。気になったページのソースを表示して、余計な部分取り除いていって、よく解読すればわかります。細かい部分は省くけど、概ねこんな感じ。両端に影付いた画像を用意（幅：820px、影の幅は10px）

内容いろいろ

neko-ten · Answer

レンダリングで影を付ける場合、ブラウザの仕様によっては意図した動作をしないのでお勧めできないです。。

サンヨーのサイトの場合、DIVの背景画像として使ってるようです。
（影の部分で右クリックして、背景画像を保存すると、影の画像が保存されますね。）

簡単には
・DIV幅と同じ幅で、グラデーション画像を作成
・影にコンテンツが重ならないようにpaddingの指定

で実装できるかと思います。

nori_007 · Answer

背景との境目ですよね。
それなら、バックグランド画像を用意して、Y 方向に繰り返しているだと思います。自信はないのですが、下記の画像かもしれません。

http://www.sanyo.co.jp/koho/img_lib/stage_bg.gif

です。

CSSで背景とページの境界の枠に影をつけたい。

>影を

テーブルと考え方は極端にかわらないのだけど、

レンダリングで影を付ける場合、ブラウザの仕様によっては意図した動作をしないのでお勧めできないです。

背景との境目ですよね。

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング