[CSS]テキストに美しい3Dやレタープレスなどのエフェクトを与えるスタイルシート
Post on:2011年12月13日
テキストにシャドウをつける『text-shadow』で、Photoshopで作ったかのように美しい3Dやレタープレスなどのエフェクトを与えるスタイルシートを紹介します。

[ad#ad-2]
CSS3を使ったテキストエフェクトのデモ
text-shadowを使った3種類、@font-faceを使った1種類のデモがあります。
ブラウザは、Chrome, Safari, Firefoxでご覧ください。

text-shadowの指定方法
text-shadowの指定方法は下記のようになります。
text-shadow: h-shadow v-shadow blur color;
- h-shadow
- 水平方向のシャドウのサイズ
- v-shadow
- 垂直方向のシャドウのサイズ
- blur
- オプション:ぼかしの量
- color
- オプション:シャドウのカラー
値は、カンマで区切ることで複数指定することもできます。
text-shadow: h-shadow v-shadow blur color, h-shadow v-shadow blur color;
[ad#ad-2]
CSS3を使ったテキストエフェクトの実装
HTML
HTMLはシンプルで、各エフェクトごとにclass名を変更するだけです。
div要素を使用していますが、hxでもpでも何でも可です。
<div class="effect_1">Programming</div>
スタイルシートは、各キャプチャとともにご紹介。

複数のテキストシャドウを使用し、3Dにスタイルします。
CSS
.effect_1{ color: #fff; font: 80px Times New Roman, Times, serif; text-shadow: 0 1px 0 #999, 0 2px 0 #999, 0 3px 0 #999, 0 4px 0 #999, 0 5px 0 #999, 0 6px 0 #000; }

テキストにレタープレスのエフェクトを与えます。
CSS
.effect_2{ font: 80px Times New Roman, Times, serif; text-shadow: -1px -1px 0px #000, 1px 1px 0px #666; }

「color: transparent;」を使い、ぼかした感じにします。
CSS
.effect_3{ font: 80px Times New Roman, Times, serif; text-shadow: 2px 2px 8px #fff; color: transparent; }

Web-fontを使用し、スタイルします。
CSS
@font-face{ font-family: chandy; src: url('comesinhandy.ttf') format("opentype"); } .myfont{ font-family:chandy;font-size:80px }
sponsors