SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 社員募集 ...

【CSS】この影はCSSの影でいいんじゃないか?

問題

こんなデザインが来ちゃったんだけど、この影、やっぱり背景画像で対応する?

回答例

この際CSSの影で対応してもいいかもしれない。

無駄なDIVはあまり好きではないけど、ちょっと無駄にDIVを入れさせてもらって、

<body>
  <div id="xxx">
    この中がコンテンツ
  </div>
</body>
body {background:url(一番後ろに入る背景画像);}
#xxx {
    width:800px; margin:0 auto;
    box-shadow: 0px 0px 5px #888888;
    -moz-box-shadow: 0px 0px 5px #888888;
    -webkit-box-shadow: 0px 0px 5px #888888;
    -ms-filter: "progid:DXImageTransform.Microsoft.Glow(color=#888888,strength=3) progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=180,strength=6)";
    filter: progid:DXImageTransform.Microsoft.Glow(color=#888888,strength=3) progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=180,strength=6);
}

Firefoxなどでは左右にいい具合の影がつくのだが、IEは左右と下にも影がついたり、ブラウザによって表示が異なる部分がある。

それでもたいした問題にはならない場合は、画像なしで影がつくのでとても楽。

関連するメモ

コメント