【css】text-shadowを使ってリッチな文字エフェクトを作る方法

text-shadowは基本的に影をつけるプロパティですが使い方次第でさまざまなエフェクトをかけることができます。

わざわざ画像にしなくても text-shadowを使うことで再現できる幅も広がります。

text-shadowの基本

まず text-shadowの基本的な書き方から見ていきましょう。

text-shadowで設定できるのは下記の4つの項目になります。

text-shadow: X軸の位置(横) Y軸の位置(縦) 影のぼかし半径 影のカラー;

上記に数値を入れて確認してみましょう。

.text-shadow{text-shadow: 1px 2px 3px #222;}

サンプルテキスト

応用すればいろいろな表現ができる

text-shadowはカンマで区切れば複数の指定をすることができます。

複数の影を組み合わせることによって影をより濃くするなどの表現ができます。

応用編

次はtext-shadowを複数使った応用になります。

html

<h1><span>text Shadow</span></h1>

css

body{background: #333;}
h1 {
        text-align: center;
        text-transform: uppercase;
}

h1 span {
	display: block;
	font-size: 60px;
	color: #fff;
	text-shadow: 3px 5px 6px #c4b59d, 0 -1px 2px #fff;
	letter-spacing: 0.1em;
}

サンプル