text-shadow

text-shadow を指定することにより、要素内のテキストに対してシャドウを設定するプロパティ。
記憶が曖昧だが、CSS 2 にはあったが CSS 2.1 で廃止され、CSS 3 では再度採用されたと思う。問題はこのプロパティをサポートしているブラウザが Safari 1.1 以降のみ (これも驚きだが) であったことだが、trunk の Minefield では実装済みとなっていて、Firefox 3.1 でも含まれるだろう。

注意：

このページは Safari か Firefox 3.1 (2008-8-25 現在、開発版のみでリリースされていない) で表示しなければ効果を確認することはできません。

追記：

2008-28-08
Opera 9.5.2 も対応したようです。

効果

text-shadow がの効果は、基本的にこのようなものだ。

Photoshop を例にするとシャドウはこのように設定する。

"角度" "距離" "サイズ" そして "色" CSS での設定にあたる。これらを「単位付き数値」で記述するのが CSS の text-shadow というわけだ。

プロパティ

none

シャドウを生成しない

値 (単数)

[長さ] [長さ] [長さ] [色]

値 (複数)

「[長さ] [長さ] [長さ] [色]」のセットを「,」区切りで複数の影を設定する

box-shadow の設定は左右の距離、上下の距離、ぼかし範囲、影の色をセットにして記述する。このうち、［長さ］の記述順は左から順に［左右の距離］［上下の距離］［ぼかし範囲］と記述する。この順番は決められている。［影の色］は先頭に持ってきても良いようだが仕様変更も考えられるので、Ｗ3C の内容に従って［左右の距離］［上下の距離］［ぼかし範囲］［影の色］と記述しておく方が良いかもしれない。

基本的な設定

CSS にはこのように記述する。

<p style=" text-shadow: 0.15em 0.2em 0.3em #8fbc8b;">The Effect</p>

The Effect

上記セットをカンマ (,) で区切ることで任意の数の影を設定することもできる。このセットの「数」によって複雑な表現が可能となるのだが、Firefox 3.1 ではカンマで区切り、右に記述したものが「下」に、Opera は右に記述したものが「上」にと、今の仕様ではややこしい。Firefox の解釈の方が正しいのではないかという意見があるようだが、いつ統一されるかは分からないので、複数のシャドウを使用する場合は注意が必要だ。

このプロパティは全ての要素の対して設定することができるが、実際に使用する場合は、対象となる要素がどのように表示されるのかをよく考え、実験してみること。不必要な設定と不適当な設定は、訪問者に不快感を与えるだけの結果となる。

プロパティ値

text-shadow の値には「単位付き数値」で角度、距離、サイズを記述する。カラーは「キーワード」または # を頭に 6 桁または 4桁 の「16 進数」で記述する。
角度、距離、サイズに使用できる「単位」は CSS における絶対単位か相対単位を指定する。単位にはマイナスを記述することで、シャドウを表示する位置を左や上に指定することができる。

絶対単位

in (インチ)cm (センチメートル)mm (ミリメートル)pt (ポイント)pc (パイカ)

相対単位

em (要素を含む範囲で有効なフォント高を1とした単位)ex (要素を含む範囲で有効なフォントの小文字 x を1とする)px (1ピクセルを1とする)% (親要素に指定されているサイズに対した割合)

上記の単位を設定できるのだが、実験してみたところ％は有効にならなかった。シャドウにパーセントというのも、何を基準に？となるので、利用できないのかもしれないが、これはよく分からない。
テストページを用意したので、Safari か Nightly で試してみてください。txt-shadow テストページ

効果の範囲

シャドウの範囲を大きくとってもボックスサイズが大きくなるわけではないが、ケースによっては shadow を設定していない要素の領域に影響を及ぼすことがある。
下のサンプルは div ブロック内に２つのパラグラフを置き、上のパラグラフには text-shadow を設定している。

HTML
<p id="exp-txt1">The Effect</p>
<p id="exp-txt2">The Effect</p>
CSS
#exp-txt1 {
 color: #003333;
 background-color: #99cccc;
 font-family: "Times New Roman", serif;
 font-size: 2em;
 text-shadow: #336666 0.4em 2.2em 0.15em;
}
#exp-txt2 {
 color: #003333;
 background-color: #ccffff;
 font-family: "Times New Roman", serif;
 font-size: 2em;
}

レンダリング結果を見ると、下側のパラグラフに text-shadow を設定しているように見えると思うが、実は設定しているのは上側のパラグラフだ。
どういったことになっているかというと、パラグラフには font-size で 2.8em を設定した。そのため、下のパラグラフが生成される辺りにシャドウがレンダリングされて、あたかも下のパラグラフの効果のように見えているわけだ。
下側のパラグラフには背景色を設定しているのだが、シャドウはテキストと背景の間に入り込むようにレンダリングしているあたりが面白いというか、これで正解なのだろうか？
ちなみに Safari も同様な結果となる

このようにレンダリングされない場合もあるし、z-index を指定したブロック内に置かれている場合は、その積み上げレベルに従うようだ。
なお、上のような状態を避けるために取る手段は、シャドウの距離をテキストブロックより大きくとらないシャドウの距離をフォントサイズよりも大きく取らない指定要素に overflow:hidden を併記するといった設定によって回避できる。

おまけのテスト

シャドウ効果でどのようなことができるのかをプチテストしてみる。

フォントカラーとシャドウカラーは全く同じ設定だが、２つの印象は異なると思う。下のパラグラフにはオフセット量を0、カラーを #ccffff と設定した明るい (?) シャドウが上に来るように追加しているので、背景色より若干明るい輪郭が加わることでテキストを浮き上がらせる効果がある。面白いでしょ？

ただし、上の方でも書いたように Opera はシャドウセットの順番を、下にくる物から記述しなければならない (Opera 9.5.2 で確認) 下のサンプルは Opera 用にシャドウ設定を記述した CSS を指定している。

では背景色が暗く、フォントカラーが明るい場合は？

下側のパラグラフには黒の輪郭が現れるように設定した。このサイズでは微妙だが、下側の方が若干引き締まって見えないでしょか？
下は Opera 用

これらは印刷用の Illustrator データを作る時によく使う方法で、下側の例はオーバープリントで設定する。txt-shadow が利用できるなら、HTML でもこんな使い方もあるということでお茶を濁しておきます。
ところで、Safari は text-shadow プロパティに対応しているはずだが、複数のシャドウを設定すると最初の値しか読み込まないのだが、これはバグ？

Library

• Home
• ってもzilla Archive
• CSS Test Cont.

Group

• Text Index

• text-shadow
• white-space
• text-transform
• text-indent