[CSS]text-shadowのカラー指定にRGBaが便利な訳

text-shadowのカラー指定に何を使うかというのを意識していませんでしたが、下記のチップスを読んだら「なるほど」と思ったので、紹介します。

「text-shadow」のカラー指定には「black」「#000」などが使用できますが、「text-shadow」をサポートしているブラウザは「RGBa」での指定もサポートしているので、RGB値によるカラー指定が行えます。

これは特にPhotoshopで作成した繊細な背景に影のカラーを一致させる際に、威力を発揮するのではないでしょうか。ま、当たり前といえば当たり前なのですが。

まとめると下記のようになります。

RGBa指定が便利な訳

また、下記のように20%のブラックを指定すると、たいていの背景にちょうどよくあうドロップシャドウがスタイルされます。

p{
	text-shadow: rgba(0,0,0,0.2) 2px 2px 0;
}

※「0 1px 0」くらいが微妙でいい感じになります。デモは分かりやすくするために「2px 2px 0」にしています。
デモページ（当方作成）

Post on:2010年8月23日