IEのfilterプロパティを使って「よりそれっぽい」ドロップシャドウをかける方法
ちょっと調べてみたところ日本語の情報ななかったのでここに書いときます。
(追記:探し方が悪かったみたい。ちゃんとあった... IEでCSS3のドロップシャドウを使いたい)
IEには独自のCSSプロパティであるfilterでWebコンテンツにさまざまなエフェクトをかけることができます。
(参考:MSDN Library - Static Filters)
filterプロパティを使えば、IEでもFirefoxなどで対応している、text-shadowとかbox-shadowっぽいことわできますが、見た目がいまいちです。(下図参照)
これを解消する方法として、「Blurレイヤー生成法」というのを考えてみました。
ちょっとググッてみると、海外の方で同じような解決法をブログにアップしてる人が見かけられます。
「Blurレイヤー生成法」だと、上記のようにイケてないドロップシャドウが以下のように改善されます。
やってることは単純で、BlurフィルターでmakeShadowをtrueにすると、対象の影(に見えるもの)が作れるので、その影を対象の後ろにレイヤーとして重ねて見せるというだけ。
上記のソースコードは以下のような感じ
この手順をjavascriptライブラリ化すると、手軽に使えていいかもしれない。
(追記:ちゃんとライブラリ化もしている。すばらしい... IEでCSS3のドロップシャドウを使いたい)