[CSS]テキストに美しい3Dやレタープレスなどのエフェクトを与えるスタイルシート

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

Text Effects using CSS3

[ad#ad-2]

• CSS3を使ったテキストエフェクトのデモ
• text-shadowの指定方法
• CSS3を使ったテキストエフェクトの実装

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
}