スマートフォンサイト制作時に見出しを軽くするため、画像を使わずCSSのみでコーディングする機会が増えてきました。
今回はもともと画像であった見出しを、CSS3の「text-shadow」プロパティを使って再現したので備忘録として書いておきます。

text-shadowでアウトラインとドロップシャドウ

「text-shadow」プロパティでは影となる文字の縦横の位置をずらし、影の効果を与えています。
影の位置を4方向に散らすことによってアウトラインに近いものが再現できます。

HTML

[html]
<h1 class="shadow1">見出し1</h1>
<p>テキストテキストテキストテキストテキストテキスト<br>

<h2 class="shadow2">見出し2</h2>
<p>テキストテキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキストテキストテキスト</p>
[/html]

CSS

[css]
.shadow1 {
color: #fff;
text-shadow: 1px 1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
-1px -1px 0 #000;
}

.shadow2 {
text-shadow: 3px 3px 1px #ccc;
}
[/css]

上の「見出し1」は割とキレイに見えていますが、実は擬似的にアウトラインっぽく見せています。文字とアウトラインの大きさを変えていくと、文字の終点があまりきれいに描写されないことがわかります。

CSS

[css]
.shadow1 {
color: #fff;
font-size: 50px;
text-shadow:
3px 3px 0 #000,
3px -3px 0 #000,
-3px 3px 0 #000,
-3px -3px 0 #000;
}
[/css]

こうしてみるとあまり万能とは言えないコーディングですが、フォントやサイズ、ボケをうまく調整することではキレイに描写することも可能です。
下の例は白で1pxのアウトライン、その外にドロップシャドウをかけたパターンです。

CSS

[css]
.shadow1 {
color: #030;
text-shadow: 1px 1px 0 #fff,
1px -1px 0 #fff,
-1px 1px 0 #fff,
-1px -1px 0 #fff,
3px 3px 3px #aaa,
3px -3px 3px #aaa,
-3px 3px 3px #aaa,
-3px -3px 3px #aaa;
}
[/css]

jQueryでIE8ユーザーへの対応

「text-shadow」プロパティはIE9以前には未対応。私が制作に関わっていたサイトではIE8の閲覧者が20%近くいるので、対応をせずに画像からテキストへ変更することはできませんでした。
そこで今回使わせていただいたのはrotsuyaさんの「jquery-ie-text-shadow」 です。こちらは少しの記述でするだけで、IE7,8,9に「text-shadow」プロパティをきかせられます。
https://github.com/rotsuya/jquery-ie-text-shadow/blob/master/README.md