関連フィルタ

• Blur
• DropShadow
• MotionBlur
• Shadow

text-shadow

Macintoshネイティブのブラウザ、Safariのみ対応しています。

要素に影を付けます。影効果がボックスの大きさを変える事はありませんが、効果がボックスの領域外に及ぶ事はあります。その時の影効果のスタックレベルは要素自身のスタックレベルと同じです。

先ず1つ目の長さの値で、右側へどれだけずらすかを指定します。負の値の場合は左側へずらします。
次に2つ目の長さの値で、下へどれだけずらすかを指定します。負の値の場合は上へずらします。
3つ目の長さの値で、影のぼかし範囲を指定します。この値が無い場合は、ぼかしはありません。ぼかし方については、UA依存で、細かな指定はありません。

以上に示した3つの長さの値の前又は後に、影の色を指定出来ます。この指定が無い場合は、代わりに'color'の値を用います。

複数の影を指定する事も可能です。複数影を指定した場合、1つ目の影の上に2つ目の影、2つ目の影の上に3つ目の影、と重ねて行き、最後にもとのテキストを乗せます。

例を挙げましょう。

h1 { text-shadow: 0.2em 0.2em }
上の例では、テキスト本体の右下に影が付きます。色の指定が無いので影の色は当該要素のテキストと同じ色になり、ぼかしの範囲指定も無いので、テキストの影はぼかされません。

次の例では、テキストの右下に影が付きます。また、影の周囲5pxの範囲でぼかしが生じ、影の色は赤になります。
h2 { text-shadow: 3px 3px 5px red }

次の例では影効果を複数列挙しています。
h2 { text-shadow: 3px -3px , yellow -3px 3px 2px, 3px 3px red}
1つ目の影には色の指定が無いので、当該要素の'color'の値と同じ色が使われます。2つ目の影は一つ目の影を上塗りし、色が黄色、ぼかしが有りで、テキスト本体の左下に生じます。3つ目の影は色が赤、ぼかしが無しで、テキスト本体の右下に生じます。

次に、こんな例を考えてみましょう。
span.glow {
  background: white;
  color: white;
  text-shadow: black 0px 0px 5px;
}
この例では'background'と'color'が同じ色の値を持っており、'text-shadow'は日食のような文字効果を創り出すのに用いられています。

このプロパティはCSS1の時にはありませんでした。ですから、このプロパティが無くても文書が見えるように心がけましょう。つまり、上の日食のような事は避けたほうが良いです。

ほかにも、エンボスやスキンなども扱えるようになれば、とても便利そうです。しかし、この'text-shadow'もサポートされていない状況では、まだまだテキスト画像とおさらばする道は、遠そうです。

注意点

1. このプロパティが無効でも文書が見えるように注意しましょう。