[CSS]IE6/7/8でもCSS3のようにボックスにシャドウをつけるスタイルシート
Post on:2010年2月26日
sponsors
ボックスにシャドウをつけるCSS3に非対応のIE6/7/8でも、同様にシャドウをつけるスタイルシートをCSSplayから紹介します。
Shadow Boxing for all except Opera
デモ
上記のキャプチャはIE6で表示したもので、CSS3対応ブラウザ（Fx3.5）で表示したものは下記のようになります。
上記と同じものをFx3.5で表示
若干の違いはありますが、許容範囲ではないでしょうか。
IE用の実装には「filter」が利用されており、下記のようになります。
CSS
|
1 2 3 4 5 6 7 8 9 |
<textarea name="code" class="css" cols="60" rows="5"> <!--[if IE]> <style type="text/css"> .container {padding-left:14px;} .frame {left:4px; top:4px;} .shadow {background:#000; margin:-4px -4px; filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='5', MakeShadow='true', ShadowOpacity='0.60');} </style> <![endif]--> </textarea> |
ボックスシャドウはdivに設定しているため、内包要素はテキストでも画像でも同様の効果が得られます。
対応ブラウザはIE5.5, IE6, IE7, IE8, Firefox, Safari, Chromeとのこで、Operaは非対応となっています。
※当環境（XP）でIE5.5では期待通りの表示はしませんでした。
sponsors
