タグ別アーカイブ: text-shadow

CSS：text-shadowを使用し、文字に影や縁取りをする

Posted on by
2

CSS3のtext-shadowを使用すれば、画像で作ったように文字を装飾することができます。
text-shadowを使用して、文字に影を付けたり、縁取り（アウトライン）をする方法をメモします。

text-shadowは文字に影を付けるプロパティです。

[text-shadow]

text-shadow: 横方向 縦方向 ぼかし 影の色;

使用例は下記のように指定します。

text-shadow: 5px 5px 1px #999999;

text-shadow1

設定する値を複数指定したい場合は下記のように’,’区切りで指定します。

text-shadow: 5px 5px 1px #999999, -5px -5px 1px #999999;

text-shadow2

noneを指定した場合、影は付きません。

■ 文字に影を付ける場合

【CSS】

.test {
	color: #000;
	font-size: 50px;
	font-weight: bold;
	text-shadow: 5px 5px 1px #999999;
}

【表示例】

text-shadow1

■ 文字に縁取りをする場合

【CSS】

.test {
	color: #FFF;
	font-size: 50px;
	font-weight: bold;
	text-shadow: 2px 2px 1px #00F,
	-2px 2px 1px #00F,
	2px -2px 1px #00F,
	-2px -2px 1px #00F;
}

【表示例】

text-shadow3