[CSS]IE6/7/8でもCSS3のようにボックスにシャドウをつけるスタイルシート

サイト構築 -CSS

ボックスにシャドウをつけるCSS3に非対応のIE6/7/8でも、同様にシャドウをつけるスタイルシートをCSSplayから紹介します。

Shadow Boxing for all except Opera
デモ

上記のキャプチャはIE6で表示したもので、CSS3対応ブラウザ（Fx3.5）で表示したものは下記のようになります。

上記と同じものをFx3.5で表示

若干の違いはありますが、許容範囲ではないでしょうか。
IE用の実装には「filter」が利用されており、下記のようになります。

CSS

<!--[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]-->

ボックスシャドウはdivに設定しているため、内包要素はテキストでも画像でも同様の効果が得られます。