複数の方向にtext-shadowしてみる

基本的なtext-shadowの使い方はこちらに譲るとして…
text-shadow－CSS3リファレンス

基本的にtext-shadowは一方向にしか使えません。
ぼかしまくってごまかすという手もありますが。

結局こういう風にしかならないので、根本的な解決にはなっていません。

実を言うと、text-shadowは同じセレクタに対し複数設定することが可能なのです。
これにより、複数方向へ影を落とすことが可能となります。

#shadow {
  color: rgb(222,44,22);
  text-shadow:  0    0  3px rgba(0,0,0,.8),
                0  5px 10px rgba(222,219,30, 0.5),
                0 -5px 10px rgba(222,219,30, 0.5),
               -5px  0 10px rgba(222,219,30, 0.5),
                5px  0 10px rgba(222,219,30, 0.5);
}

上記のようにCSSを書くと、複数の方向にtext-shadowをかけることが出来ます。

そう、こんな風に。

ちなみに、複数かけるときは、最初のtext-shadowが前になり、後に続けば続くほど後ろになるので注意すること。

#shadow {
  color: rgb(222,44,22);
  text-shadow:  0  5px 10px rgba(222,219,30, 0.5),
                 0 -5px 10px rgba(222,219,30, 0.5),
                 -5px  0 10px rgba(222,219,30, 0.5),
                 5px  0 10px rgba(222,219,30, 0.5),
                 0    0  3px rgba(0,0,0,.8);
}

後ろになればなるほど前のtext-shadowに影響されてぼけていくのが分かると思われる。