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

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

デモのキャプチャ

A CSS3 Tip
デモページ(当方作成)

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

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

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

RGBa指定が便利な訳

  • RGBで作成した背景に、正確なRGB値で影を指定できる。
  • 「text-shadow」をサポートするブラウザは「RGBa」の指定もサポート。

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

CSS

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

top of page

©2017 coliss