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

投稿日: / 更新日:

スタイルシートのtext-shadowは、テキストに影の効果を付けるためのプロパティです。

サンプルコード

text-shadowを指定したサンプルコードです。

p {
	text-shadow: 10px 10px 10px #f00 ;
}

デモ

text-shadowを使って、影の効果を付けたデモです。各値を調節して、どのように変化があるのかを試してみて下さい。

値の指定

値は「水平方向のオフセット」「垂直方向のオフセット」「ぼやけの度合い」「色」の4つの値を指定します。「ぼやけの度合い」のみ、省略可能です。順番を変えるとエラーになってしまいます。各値は半角スペース( )で区切って下さい。

  1. horizontal offset (水平方向のオフセット)
  2. vertical offset (垂直方向のオフセット)
  3. blur radius (ぼやけの度合い)
  4. color (色)

下記にコードの例を載せておきます。

/* 全て指定する場合 */
#element {
	text-shadow: 10px 20px 30px #D36015 ;
}

/* [blur distance]を省略する */
#element {
	text-shadow: 10px 20px #D36015 ;
}

/* 順番を変えてるので間違い */
#element {
	text-shadow: #D36015 10px 20px 30px ;
}

個々の値の説明は下記の通りです。リンクをクリックするとデモを確認できます。

項目説明
horizontal offset指定必須。水平方向に影をずらします。正の数の場合は右方向、負の数の場合は左方向にずれる。
vertical offset指定必須。垂直方向に影をずらします。正の数の場合は下方向、負の数の場合は上方向にずれる。
blur radiusオプション。影のBlur効果の度合いを指定する。高い数値を指定するほど影が薄くぼやける。
colorCSSで許可された方法で、色の指定ができます。Hex(#D36015)、RGB(rgb( 211, 96, 21 ))、HSL(hsl( 24, 82%, 46% ))、KEYWORD(brown)など。
inherit親要素の値を引き継ぐ。例の場合、div要素のtext-shadowには、bodyに指定された値(10px 10px 10px #f00)が引き継がれる。
initialプロパティの初期値が適用される。この場合、none(影の効果なし)が適用される。
none影の効果を付けない。

ブラウザのサポート

2016年7月現在の、ブラウザのサポート状況は次の通りです。全ての主要ブラウザで、ベンダープレフィクスなど気にすることなく利用できます。

  • Chrome

    ●

    -

    時期不明

  • Firefox

    ●

    -

    時期不明

  • Safari

    ●

    -

    時期不明

  • Ie

    ●

    -

    時期不明

  • Edge

    ●

    -

    時期不明

  • Opera

    ●

    -

    時期不明

  • Safari(iOS)

    ●

    -

    時期不明

  • Ie Mobile

    ●

    -

    時期不明

  • Chrome

    ●

    -

    時期不明

  • Android

    ●

    -

    時期不明

  • FF Mobile

    ●

    -

    時期不明

  • Opera Mobile

    ●

    -

    時期不明