text-shadowを使えばテキストに3Dっぽいデザインもできる

クラス名はそのまま使わせていただきました。

デモ

そして、日本語も

ちなみにソースコードは下記です。

CSS

.shadow {
	color: #FFFFFF;
	font: bold 40px Verdana,Arial,Meiryo,"メイリオ","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",Osaka,"MS P Gothic","ＭＳ Ｐゴシック",sans-serif;
	text-shadow: 1px 1px #fe4902, 2px 2px #fe4902, 3px 3px #fe4902, 4px 4px #fe4902, 5px 5px #fe4902, 6px 6px #fe4902;
}

text-shadowプロパティの値は4つ、ちなみの下記のような感じです。

text-shadow: [X] [Y] [Blur] [Color];

[X]は、右側へどれだけずらすかの指定です。ちなみに負の数にすると左になります。

[Y]は、下側へどれだけずらすかの指定です。ちなみに負の数にすると上になります。

[Blur]は影のぼかし

[Color]は影の色になります。

ソースコードを見てもらえばわかると思いますが、text-shadowプロパティは複数列挙することが可能なのです。このように複数書くことによって3DっぽいデザインもCSSだけでできます

動作確認

• Firefox 3.6.8
• Safari5
• Opera10.60
• Google Chrome5

当然ながらIEでは無理でした。