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

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

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

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

text-shadowの基本

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

<p class="shadow-a">ABCDEFG</p>

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

.shadow-a {
	text-shadow:5px 5px 1px #ccc;
}

すると、まー不思議！文字に影が！

解説

text-shadow:X方向 Y方向 ぼかし 色;

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

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

.shadow-a {
	text-shadow:rgba(0,0,0,1) 5px 5px 1px;
}

さてIEでは？

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

filter:dropshadow(color=#cccccc,offX=5,offY=5);

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

まとめると

.shadow-a {
	text-shadow:5px 5px 1px #ccc;
	filter:dropshadow(color=#cccccc,offX=5,offY=5);
}

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

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