CSS 文字に影をつけるサンプル(text-shadow)

CSSの文字に影をつけるサンプルです。
text-shadowプロパティを使用します。

確認環境
・Google Chrome
・Windows 10

目次

文字に影をつけるサンプル

CSSのtext-shadowプロパティを使用して文字に影をつけるサンプルです。

test1
test2
offset-x
test3
offset-y
test4
blur-radius
test5
color

文字に影をつけるコード

上記サンプルのコードです。

<style>
#test1{
	/* 影を右には3pxずらす */
	text-shadow:3px 3px 5px #000;
}
#test2{
	/* 影を右に15pxずらす */
	text-shadow:15px 3px 5px #000;
}
#test3{
	/* 影を下に15pxずらす */
	text-shadow:3px 15px 5px #000;
}
#test4{
	/* 影を15pxの範囲でぼかす */
	text-shadow:3px 3px 15px #000;
}
#test5{
	/* 影の色を指定 */
	text-shadow:3px 3px 5px #87CEEB;
}
.c1 div{font-weight:bold;width:300px;border:1px solid #000;
margin-bottom:20px;height:50px;text-align:center;}
</style>
<body>
<div class="c1">
	<div id="test1">test1</div>
	<div id="test2">test2<br>offset-x</div>
	<div id="test3">test3<br>offset-y</div>
	<div id="test4">test4<br>blur-radius</div>
	<div id="test5">test5<br>color</div>
</div>
</body>

text-shadowプロパティ

text-shadowのプロパティです。
引数は、4つあります。

text-shadow :  値1 値2 値3 値4

1つめの引数の値1は、影が右にずれる長さです。

値1 (offset-x) 数値+単位。指定した値の分、影が右にずれます。
マイナス値を指定した場合は左にずれます。

2つめの引数の値2は、影が下にずれる長さです。

値2 (offset-x) 数値+単位。指定した値の分、影が下にずれます。
マイナス値を指定した場合は上にずれます。

3つめの引数の値3は、影をぼかす範囲です。

値3 (blur-radius) 数値+単位。影をぼかす範囲です。省略可能です。
値が0の場合、輪郭がはっきりし、値が大きくなるにつれぼかしが強くなります。

4つめの引数の値4は、色の指定です。

値4 (color) 色を指定します。色の指定は先頭(値1の前)でも可能です。省略可能です。省略した場合の色はブラウザに依存します。

関連の記事

CSS 背景色を指定するサンプル(background-color)
CSS 背景画像を指定するサンプル(background-image)
CSS 背景画像の繰り返し方法を指定するサンプル(background-repeat)
CSS 四角の角を丸くするサンプル(border-radius)
CSS ボックスに影をつけるサンプル(box-shadow)
CSS 透明度を指定するサンプル(opacity)
CSS 線のグラデーションのサンプル(linear-gradient)
CSS 円のグラデーションのサンプル(radial-gradient)

△上に戻る