[CSS3] TextShadowで作る文字の色々なデザイン（グロウ、エンボス、ベベル、袋文字、ぼかし、3D）

こんにちは、最近はソーシャルゲーム開発中の@yoheiMuneです。
最近のWeb開発でCSS3を使って文字の装飾をすることが多くなってきました。
その中で今日は、CSS3のTextShadowを使った色々な文字装飾をブログに書きたいと思います。

CSS3のTextShadowとは

TextShadowとは、その名前の通り、文字に陰を付けることが出来るCSSです。
例えば以下のような指定をCSSをすることで、文字の陰が付きます。

<style type="text/css">
  .text1 {
    text-shadow: 2px 2px 2px rgba(30,30,30,1);
    -webkit-text-shadow: 2px 2px 2px rgba(30,30,30,1);
  }
</style>

<p class="text1">Nomal Text Shadow</p>

（実行例）

TextShadowの詳細は、以下のサイトとかが分かりやすかったので、そちらをご参照頂ければと思います。
http://www.w3schools.com/cssref/css3_pr_text-shadow.asp

CSS3のTextShadowで作る文字の色々な装飾

TextShadowは文字に陰を付ける装飾ですが、TextShadowを複数指定したり、 陰色を黒い外にしたり、ぼかし量を調整することで、色々な装飾を行うことが出来ます。

以下では、TextShadowを使った装飾のサンプルをご紹介したいと思います(*´∇｀*)

グローさせる

ぼかし量を極端に大きくすることで、後ろから光が漏れているような感じを出すことが出来ます。

color: #ffffff;
text-shadow: 0px 0px 20px rgba(255,255,0,1);
background-color: #003;

浮き出した感じの文字

文字の上側に明るい陰を、文字の下側に暗い影を付けることで、浮き出した感じを出すことが出来ます。
TextShadowのx.yの距離に負数を指定すると、文字の上に陰を付けることが出来ます。

color: #aaa;
text-shadow: -1px -1px 1px #ffffff, 1px 1px #000000;
background-color: #aaa;

沈み込んだ感じの文字

一つ上とは逆に、文字の上に暗めの陰、文字の下に明るめの陰を指定する事で、沈み込んだ感じを出すことが出来ます。

color: #aaa;
text-shadow: -1px -1px 1px #000000, 1px 1px #ffffff;
background-color: #aaa;

袋文字

文字の上下左右４カ所に、ぼかし無しで陰を指定することで、袋文字を実現することが出来ます。

 color: #ccc;
text-shadow: 1px 0px 0px #005500, 0px 1px 0px #005500, -1px 0px 0px #005500, 0px -1px 0px #005500;

ぼかした文字

出力対象の文字は透明にして、ぼかした陰のみを出力する事で、ぼけた文字を表現することが出来ます。
スタイル対象の文字は透明というところがポイントです。

 color: transparent;
text-shadow: 0px 0px 10px #005500;

3Dっぽい文字

3Dっぽい文字は、ぼかし無しで1pxずつ陰をずらして表示することで、厚みを持った文字にすることが出来ます。
またCSS対象文字よりも陰を暗めにすることで、3Dっぽい立体感を出すことが出来ます。

 color: #aaaaff;
text-shadow: 1px 1px 0px #7777aa, 2px 2px 0px #7777aa, 3px 3px 0px #7777aa, 4px 4px 0px #7777aa, 5px 5px 0px #7777aa;

最後に

CSS3って表現力が高くていいですね。
Photoshopやイラストレータなどから画像切り出しせずとも、同じ表現をすることが出来ていい感じです。

ただし、CSS3で陰を描画すると重たいという症状があるため、使う時には用心が必要かも。 特に、陰を付けたDOMオブジェクトをJSで移動するアニメーションとか要注意。。

以上、最後までご覧頂きましてありがとうございました☆