CSS3のtext-shadowを使ってフォントを装飾する

CSS3のプロパティ「text-shadow」を使ってフォントを装飾する方法です。

フォントにシャドウを付ける

以下のように設定することで、フォントに影を付けることができます。

text-shadow: 1px 2px 3px #ff0000;

それぞれの値は、
右方向に1pxずらして（マイナスだと左方向）、
下方向に2pxずらして（マイナスだと上方向）、
ぼかし具合を3px、
影の色は「#ff0000」にというように指定してあります。

もちろん、text-shadowが使えるのはCSS3に対応しているブラウザに限りますが、私の環境では、Firefox5とGoogle Chrome 12で表示できていることを確認できています。残念ながらIEは対応していません。

さらに、要素をカンマ区切りにすることで、複数の影を表示することができます。

text-shadow: 
	2px 2px 0px green, 
	4px 4px 0px red, 
	6px 6px 0px blue;

目がいたい。

フォントを立体的に見せる

以下のように同色で厚みを持たして、最後に別の色を敷くことで、フォントを立体的に浮き上がらすことができます。

text-shadow: 
	1px 1px 0px #bbbbbb, 
	2px 2px 0px #bbbbbb, 
	3px 3px 0px #bbbbbb, 
	4px 4px 0px #bbbbbb, 
	5px 5px 0px #bbbbbb, 
	6px 6px 0px #999999;

フォントを浮き上がらせる

フォントカラーと背景色が同じ色ですが、左上と右下に1ピクセルずらした影を置くことで、文字を浮き上がらしています。

color: #ffffff;
text-shadow: 
	-1px -1px 0px #bbbbbb, 
	1px 1px 0px #333333;

フォントカラーと背景色を同一色にするのは、SEO的にペナルティだったはずですが、この場合はどうなるのでしょうか。

他にも、フォントを燃え上がらせる、フォントに光沢をもたせるなどのサンプルが、さまざまなサイトで紹介されていますが、デザイン的にも日本語フォントには適していないような気がします。また、太いフォントのほうがしっくりくるので、Google web fontsなどと組み合わせて、ロゴやボタンなどにうまく利用したいですね。