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

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

デモのキャプチャ

Shadow Boxing for all except Opera
デモ

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

デモのキャプチャ

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

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

CSS

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

デモのキャプチャ

対応ブラウザはIE5.5, IE6, IE7, IE8, Firefox, Safari, Chromeとのこで、Operaは非対応となっています。
※当環境(XP)でIE5.5では期待通りの表示はしませんでした。

sponsors

top of page

©2024 coliss