【text-shadow】テキストに影を付ける

text-shadowプロパティでは、指定した要素内のテキスト(文字)に影を付ける事ができます。

また、カンマ(,)で区切る事で、複数の影を付けることも可能です。 この場合、指定した順番に影が重ねられていきます。例えば最初に指定した影は1番上、次が2番目…というように指定した順に表示され、最後に指定した影が一番下に表示されます。 なお影を付ける事でそのボックスのサイズが変わる事はありませんが、影はボックスからはみ出して表示される事もあります。

影の長さと色、ぼかし具合についてですが、1つ目の値で影を左右にずらす位置を、2つ目の値で上下にずらす位置を決めます。 そして3つ目の値で影のぼかす範囲を指定します。

色についてはRGB値、またキーワードなどで指定します。 指定できる色の種類はカラーコード一覧に記載していますので、参考にして下さい。

またtext-shadowプロパティはcss2の仕様では定義されていましたが、css2.1で削除され、CSS3で再び採用されています。 CSS3では色を省略すると、影の色はブラウザに依存するようになっています。

書式

  • text-shadow : ……… テキストに影を付ける

★:none、実数値+単位、色、inherit

none
テキストに影をつけません(初期値)
実数値+単位(左右、上下、ぼかし範囲)
数値にpxなどの単位を付けて影の長さ(ずらす位置)とぼかす範囲を指定します。必要な値を半角スペースで区切って指定して下さい。なお指定する順序は下記のようになっていますが、影の位置を示す2つの値は省略できませんので、注意して下さい。
1つ目の値……右方向へどのくらいずらすかを指定(負の値で左方向へずれる)
2つ目の値……下方向へどのくらいずらすかを指定(負の値で上方向へずれる)
3つ目の値……影をぼかす範囲を指定(省略するとぼかしのない影となる)
RGB値、またはキーワードなどで影の色を指定します。位置、またはぼかし範囲の指定の前後に記述して下さい。省略した場合、その文字の色(colorプロパティの値)が使用されます。

使用した時の例

.sample1 {text-shadow:3px 3px 2px #003399;}
.sample2 {text-shadow:-5px -5px 5px;}
.sample3 {text-shadow:1px 1px 0px #fff, 3px 3px 4px #FF0000;}

/* 文字のサイズと太さ */
div {font-size:23px; font-weight:bold;}
<div class="sample1">SAMPLE TEXT1</div>
<div class="sample2">SAMPLE TEXT2</div>
<div class="sample3">SAMPLE TEXT3</div>

ブラウザ上の表示例

SAMPLE TEXT1
SAMPLE TEXT2
SAMPLE TEXT3

対応ブラウザなどのデータ

初期値 none 値の継承 継承しない
適用可能な要素 すべての要素
メディア visual / text
対応ブラウザ Internet Explorer10~ , Google Chrome2~ , Firefox3.5~ , Opera9.5~ , Safari1.1~

関連情報