CSS3のtext-shadowを使って、文字に影をつけたり、縁取りをする方法をご紹介します

text-shadowは文字に影を付けるプロパティです。
text-shadow: 横方向 縦方向 ぼかし 影の色;

【影】
text-shadow: 2px 2px 4px #000;
simple way


【文字の縁取り】
text-shadow:
1px 1px 1px #444,
1px -1px 1px #444,
-1px 1px 1px #444,
-1px -1px 1px #444;
simple way

【縁取り＋影】
text-shadow:
1px 1px 0 #bfbfbf,
1px -1px 0 #bfbfbf,
-1px 1px 0 #bfbfbf,
-1px -1px 0 #bfbfbf,
4px 4px 4px #000;
simple way

【光る文字】
text-shadow: 0 0 10px #fff;
simple way

【浮き出る文字】
text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
simple way

【へこんだ文字】
text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
simple way

工夫次第で、色々な装飾が実現できそうです