ど素人から毛を生やす。<延>

text-shadowについて考える

Web > css 2014年10月6日(最終更新:3年前)

このページは2014.10.6に作成されています。時代の流れとそぐわない可能性があったり、僕が今以上のど素人だった頃の記事だったりするので、新しい記事を探してみるのも良いかもしれません。

どもです。
今回は、文字に影をつけるCSS「text-shadow」について、ちょっと考えてみます。

 

まずは基本から。

 

text-shadow: 右方向の距離 下方向の距離 ほかしの距離 色

 

doshirouto
text-shadow: 0px 0px 0px #a00
全ての数値をゼロにすると、影は表示されません。
これは、影が文字の真下にあり、文字と重なっているためです。

doshirouto
text-shadow: 10px 0px 0px #a00
影が文字の右に表示されました。

doshirouto
text-shadow: 0px 10px 0px #a00
影が文字の下に表示されました。

doshirouto
text-shadow: -10px 0px 0px #a00
ひとつめを負の数にすることで、影を左に表示させることができました。

doshirouto
text-shadow: 0px -10px 0px #a00
同様に、ふたつめを負にすると影は上方向に表示されます。

doshirouto
text-shadow: 10px 10px 0px #a00
左右と上下の両方に数値を入れれば、影は好きな場所に表示させられます。

doshirouto
text-shadow: 0px 0px 4px #a00
みっつめの数値を入力することで、影にぼかしが入りました。
しかしぼかしがないときに比べ、随分と色が薄くなっています。

doshirouto
text-shadow: 0px 10px 4px #a00;
影の位置をずらしたところ、影の色は濃くなったように見えます。
この理由は、全てが0pxのときに影が表示されないのと同じで、縦横0pxの状態では影の中心(最も濃い部分)が文字の下に隠れてしまっていたためです。
しかし、本来の色と比べるとまだかなり薄いです。

doshirouto
text-shadow: 0px 0px 6px rgba(255,0,0,0.5)
色を指定する部分は、他のCSSと同じくrbgaで指定することもできます。

 

ちょこっと応用編

doshirouto
text-shadow: 10px 10px 2px #a00, -10px -10px 2px #a00
影は複数個表示することができます。

doshirouto
text-shadow: 0px 10px 2px #a00, 10px -10px 2px #a00, 60px 10px 2px #a00, 70px -10px 2px #a00
沢山表示できます。
実際のサイトでこんなことをしても鬱陶しいだけですが、これは応用すると結構便利です。

doshirouto
text-shadow: 1px 0px 0px #a00, 0px 1px 0px #a00, -1px 0px 0px #a00, 0px -1px 0px #a00 (本体にcolor:#fff;)
ぼかしをなくし、上下左右にそれぞれ影を表示することで文字を縁取りすることができます。

doshirouto
text-shadow: 1px 0px 4px #a00, 0px 1px 4px #a00, -1px 0px 4px #a00, 0px -1px 4px #a00
同様に上下左右にそれぞれ表示させ、ぼかすこともできます。
文字を中心に広がり、最も濃い部分が文字の外に出ており、かつ複数の影が重なっているので、0座標で影をつけるよりも濃い影をつけることができます。

この記事は役に立ちましたか?
  • _(:3」∠)_ 面白かった  (0)
  • (・∀・) 参考になった (1)
  • (`・ω・´) 役に立った (2)