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

CSS3の文字に影をつけるサンプルです。
text-shadowを使用します。

サンプル

text-shadowのサンプルです。

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

text-shadow プロパティ

text-shadow :  値1 値2 値3 値4
説明
値1 (offset-x) 数値+単位。指定した値の分、影が右にずれます。
マイナス値を指定した場合は左にずれます。
値2 (offset-x) 数値+単位。指定した値の分、影が下にずれます。
マイナス値を指定した場合は上にずれます。
値3 (blur-radius) 数値+単位。影をぼかす範囲です。省略可能です。
値が0の場合、輪郭がはっきりし、値が大きくなるにつれぼかしが強くなります。
値4 (color) 色を指定します。色の指定は先頭(値1の前)でも可能です。省略可能です。省略した場合の色はブラウザに依存します。
値を継承する

コード

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

<style>
#test1{
	/* 1つ目の値(影が右にずれる)は3pxを指定 */
	text-shadow:3px 3px 5px #000;
}
#test2{
	/* 1つ目の値(影が右にずれる)は15pxを指定 */
	text-shadow:15px 3px 5px #000;
}
#test3{
	/* 2つ目の値(影が下にずれる)は15pxを指定 */
	text-shadow:3px 15px 5px #000;
}
#test4{
	/* 3つ目の値(影をぼかす範囲)は15pxを指定 */
	text-shadow:3px 3px 15px #000;
}
#test5{
	/* 4つ目の値(色を指定)は#87CEEBを指定 */
	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>

関連の記事

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



△上に戻る