本当に CSS だけでテキストにシャドウを

前回、S i M P L E * S i M P L E さんのエントリーにただ乗りさせていただく感じで書いた 「CSS は正しくお使いください」 というエントリーですが、Text shadows プロパティが定義されてブラウザが実装するまで待てって、まったく解決になってねーよっていうエントリーだったせいか、なんか他に方法ないのかね？という話を知り合いからもらったので、その時話した方法をメモ代わりに上げておきます。

最初に断っておきますが、これから紹介する方法は、今現在、IE では認識されませんので、あまりインパクトはないということと、テキストにシャドウを付けるということ自体、無理に CSS でやることなの？という個人的な疑問もありますので、積極的に使用をオススメするものではありません。あくまでこんな方法もあるよという程度で楽しんでください。

ということで、まずはいきなりソースから。

HTML:
<h1 class="shadow">Sample Text Shadow</h1>
---
CSS:
h1.shadow {
     font-size:200%;
     color:#ccc;
     }
h1.shadow:after {
     content:"Sample Text Shadow";
     color:#333;
     display:block;
     margin:-1.2em 0 0 -0.1ex;
     }

:after 擬似要素を使用しているので、:after に未対応の IE （最新版の IE7 も含む） では意味なしということ。IE 以外のモダンブラウザでは問題ないと思いますが。

実際に表示するとこんな感じ。（下記は画像ですが）

下記に簡単な解説を。

h1.shadow {
     font-size:200%;
     color:#ccc;
     }

まず、上記はそのまんまなのでわかるかと。ここで 「シャドウ」 の方のカラーを指定しておきます （赤字部分）。で、その次ですが、

h1.shadow:after {
     content:"Sample Text Shadow";
     color:#333;
     display:block;
     margin:-1.2em 0 0 -0.1ex;
     }

:after 擬似要素を使って、テキストの後にまったく同じテキストを表示させます。合わせてテキストのカラーを指定しますが、こちらに本体 （シャドウじゃない方） のカラーを指定します。

ここまでだと、下記のような感じに表示されます。

次からがポイントですが、

h1.shadow:after {
     content:"Sample Text Shadow";
     color:#333;
     display:block;
     margin:-1.2em 0 0 -0.1ex;
     }

擬似要素を display:block してやります。すると、

こうなりますね。

そしたら、

h1.shadow:after {
     content:"Sample Text Shadow";
     color:#333;
     display:block;
     margin:-1.2em 0 0 -0.1ex;
     }

top と left に margin を指定して、擬似要素の内容を元のテキストに重ねてしまいます。擬似要素が見た目上は本体になるので、実際のテキストより左上にいくように指定してあげるというわけ。

Firefox 等で表示すれば、はい出来上がり。なお、フォントによって同じソースでも見た目が変わる可能性があります。

でもやっぱり画像でやれと言いたい。

11月28日 追記
IE 等、:after 擬似要素に対応していないブラウザを考えると、最初のシャドウのカラーを指定している部分は、Hack を使うなりして未対応ブラウザではシャドウじゃないほうのカラーが適用されるようにしておいたほうがいいですね。