株式会社プライムネットワークスタッフが、html5やCSS3、phpなどのWEB技術に関することやワードプレスなどのCMSについて学んだことなどを紹介して行きたいと思います。
今日は、CSS3における「text-shadow」のお話。
まず、この「text-shadow」、何ができるかというと英語表記のまんま、「文字に影」と付けます。
つまりは、いままでPhotoShopやFireworksなどの画像加工ソフトで、文字にかけていたドロップシャドウ（文字に影をつける）を、CSSでコントロールできるというもの。
ちょっとした修正なのに、わざわざソフトを立ちあげて、画像保存してなんていう面倒くさいことに煩わされず、ちょっとテキストエディタをいじるだけで修正できるので、とても便利です。
とは言え、そこはCSSの話。
対応ブラウザが、モダンブラウザだと言われている、Chrome, Safari, Firefox, Operaでは問題なく利用できるのですが、2013年１月の時点で約55%ほどだと言われているIEには、まったく効き目がありません！！
しかも、微増ながらシェアがあがっているのだとか・・・
世界では、CROMEがIEのシェアを抜いて１位となっているというのに・・・。
それでは実際に「text-shadow」で何ができるのかを見てみましょう。
今回やるべきことは、3pxの中間色のグレー（#999）の影を落としてみる。
サンプルテキストに日本語を使うとかっこ良くできないのだよ
これには、以下のようなtext-shadowのスタイルを入れています。
text-shadow: 3px 3px 3px #999;
書き方の意味はというと・・・
text-shadow: 右方向 下方向 ぼかしの距離 色;
ちなみに、右方向と下方向にマイナスを入れると、それぞれ逆の方向、つまり左方向、上方向にシャドウをいれることになり、さきほどのソースをマイナスにしてみると
ハイ、これわかりづらいですよね？
こんなときはどうするかというと、text-shadowでは、ぼかしの距離を省略することができるので、その部分を省略し、ぼかさずシャープに影をつけてみましょう。
text-shadow: 3px 3px #999;
どうですか、ぼかしていないのに、この見づらさ・・・。
但し、どのように移動しているのかはわかりますよね？
text-shadow: 1px 1px #999;
だんだん僕のセンスが疑われはじめてきたのではないでしょうか・・・
こうなったら、思い切って、10pxほど、移動させてやりましょう。
text-shadow: 10px 10px #999;
やればやるほど、ダメになるという典型ですね。
「一番最初に作ったもののほうが良かった」というwebに有りがちな失敗例です。
しかし、この惨憺たる結果を見てきたときに、text-shadowって使い場所がなくね？なんておもいませんか？
いままでの例を見る限り、ないほうがマシじゃん！なんて・・・
でも、このtext-shadowは、太字や大きな文字と合わせると、それはそれは見栄え良くなるんですよ！
ただ、ただ、僕の使い方が下手くそだっただけで、もっと上手に使えるスタイルなのです。
ですので、みなさんは、色々と試してみてカッコイイtext-shadowの使い方を模索してみて下さい。
IE対応については、また別の機会に・・・
ツイート
