【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は左右と下にも影がついたり、ブラウザによって表示が異なる部分がある。
それでもたいした問題にはならない場合は、画像なしで影がつくのでとても楽。
コメント