トップページ  > CSS3  > text-shadow

★CSS3リファレンス

text-shadow …… テキストに影をつける
Firefox3Firefox4 Google Chrome2Google Chrome3Google Chrome4Google Chrome5Google Chrome6 Safari3Safari4Safari5 Opera10

text-shadowプロパティは、テキストに影をつける際に使用します。

text-shadowプロパティでは、スペース区切りで<水平方向の距離> <垂直方向の距離> <影のぼかし半径> <影の色>を指定することができます。長さの値には、pxやemやexなどの単位が利用できます。

1番目の長さの値は、水平方向の影のオフセット距離を表します。正の値を指定すると右へ、負の値を指定すると左へ影が移動します。

2番目の長さの値は、垂直方向の影のオフセット距離を表します。正の値を指定すると下へ、負の値を指定すると上へ影が移動します。

3番目の長さの値は省略可能ですが、指定した場合には影のぼかし半径を表します。ぼかし半径が指定されない場合はゼロとなります。尚、ぼかし半径とは、ぼかし効果の境界までの距離のことですが、ぼかし効果を計算する厳密なアルゴリズムは定義されていません。

色の値は省略可能ですが、指定した場合には影の色を表します。長さの値の前か後に任意で指定します。色の値が指定されない場合には、ブラウザが選択した色が使用されます。

上記の値のセットをカンマ( , )で区切って、複数の影を指定することもできます。

影は、他のテキスト装飾が適用されるのと同じように、要素のすべてのテキストに適用されます。指定の仕方によっては影同士が重なり合うかもしれませんが、テキスト自身の上に覆われることはありません。また、ボックスからはみだして影が表示されることがありますが、ボックスのサイズ自体が変わることはありません。

ボックスに影をつける場合には、box-shadowプロパティを使用します。

■値

none
テキストに影をつけない(初期値)
水平方向の距離 垂直方向の距離 影のぼかし半径 影の色
スペース区切りで<水平方向の距離> <垂直方向の距離> <影のぼかし半径> <影の色>を指定する。ぼかし半径と色は省略可

■適用対象・値の継承・初期値

初期値
none
適用対象
すべての要素と生成コンテンツ
値の継承
する

■使用例

スタイルシート部分は外部ファイル(sample.css)に記述。

h1.sample1 {text-shadow: 5px 5px 2px blue;}
h1.sample2 {text-shadow: 5px 5px 2px blue , -5px -5px 1px red;}

HTMLソース

<html>
<head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<h1 class="sample1">text-shadowの使用例1</h1>
<h1 class="sample2">text-shadowの使用例2</h1>
</body>
</html>
↓↓↓

ブラウザ上の表示

text-shadowの使用例1

text-shadowの使用例2

▲ページ先頭へ
トップページ  > CSS3  > text-shadow
PR
MuuMuu Domain!
ドメイン取るならお名前.com
さくらのレンタルサーバ
ロリポップ!レンタルサーバー
HTMLクイックリファレンスについて
© HTMQ