[CSS]text-shadowをIEでもやってみる。

お久しぶりの更新で申し訳ないなんて微塵も思いません。全国2人(2人もいるのか知らんけど)の下山ファンの皆様、お待たせしました。
今回は「text-shadow」で遊んでみようってことです。

忙しくなるとデザインを外注するんですが、ドロップシャドウをふんだんに使用したデザインを納品していただきました。
いつもなら見出しに影が多いので画像でペタペタ切ったり貼ったりするんですが、ここはいっちょtext-shadowを散りばめてみようじゃないか！と言うことで、恥ずかしながら初めて真剣に調べてみました。

例によって例の如くIEはバージョン10からしかサポートしてない始末。
それでもめげないのが下山です。

text-shadowの基本

まずはhtmlを以下のように書いたとして

CSSを以下のように書きます。

すると、まー不思議！文字に影が！
みたいな感じです。[デモはこちら]

解説

X方向・・・+値で右、-値で左
Y方向・・・+値で下、-値で上
ぼかし・・・値が大きいほどボケが多い
色・・・そのまんま色

もちろん色はrgbaでの指定を可能。

さてIEでは？

IE9以前のブラウザはtext-shadowをサポートしていませんので、IEでは「filter」を使います。

これでIEでもドロップシャドウを実現できますね。（※まー不格好ですけどね！）

まとめると

上記CSSでIEまでサポートできますね。（※くどいようですけどIEだと不格好ですね！）
こちらのデモはIEと、その他モダンブラウザでもドロップシャドってます。

記事を久しぶりに書いたら、今までの流れが分からなくなっていました・・・
今年はちゃんと書こうと思ってましたけど・・・無理。