こんにちは、Webプログラマーのトムです。
さて今回はCSSで文字や要素に影を付ける方法について解説します。影を付ける方法は３通りの方法（プロパティ）があります。それぞれ文字に付ける時に使ったり要素に付けたりと使い方が異なるので混乱しそうですが、それほど難しくないのでしっかりと理解しましょう。
今回のポイント・・・文字に影を付けるのはtext-shadow、要素に影を付けるのはbox-shadow、両方に使える＆透過画像に影を付けられるdrop-shadowの３つを使い分けていこう
文字に影を付けるtext-shadowプロパティ
text-shadow: 横方向の基準点からの距離 縦方向の基準点からの距離 影のぼかし半径(省略可) 影の色;text-shadowプロパティは文字に影を付ける時に用います。そして最大で3つの値と色の値を取ります。
「横方向の基準点からの距離」の意味は、基準点＝元の文字から横方向にどれだけの距離を付けて影を描くか、という指定を表します。ここではプラスとマイナスの数値が利用でき、プラスだと右方向、マイナスで左方向となります。また数値の単位はpxやemが使えます。同様に「縦方向」についてはプラスが下方向、マイナスが上方向になります。↓の実行例（１）は横方向、縦方向それぞれ5pxの距離で赤色の影を付けた例です。
実行例（１）
See the Pen shadow_01 by トム@株＆不動産投資・Webプログラマー (@roby_tom) on CodePen.
次は逆に縦横それぞれにマイナスの指定をしてみましょう。実行例（１）とは影が逆についていることが分かります。
実行例（２）
See the Pen shadow-02 by トム@株＆不動産投資・Webプログラマー (@roby_tom) on CodePen.
次に影にぼかしを入れてみましょう。省略可だった3つ目の値を入力すればOKです。実行例（１）にぼかしを追加してみます
実行例（３）
See the Pen shadow_03 by トム@株＆不動産投資・Webプログラマー (@roby_tom) on CodePen.
ぼかしを入れることでオシャレな文字になりましたね。このようにtext-shadowは文字に影を付ける時に便利に使えるプロパティです。
要素に影を付けるbox-shadowプロパティ
次は要素に影を付けるbox-shadowプロパティです。
box-shadow: 横方向の基準点からの距離 縦方向の基準点からの距離 影のぼかし半径(省略可) 影の広がりの半径(省略可) 影の色 inset(省略可);box-shadowプロパティは最大で4つの値を取ります。そして色、inset(要素の内側に影を付ける)の２つのオプションを指定できます。縦横方向のプラスマイナスの方式はtext-shadowと同じです。
例としてspanタグで作成した送信ボタン(薄い緑色)の下と右に、濃い緑色の影を10px分をつけるデザインを書いてみましょう。
実行例（４）
See the Pen shadow_04 by トム@株＆不動産投資・Webプログラマー (@roby_tom) on CodePen.
ボタンの右と下に濃い緑色の影が作られているのが分かりますね。
次に、実行例（４）に、影のぼかし半径を表す3つ目の値を5px入れてみましょう。
実行例（５）
See the Pen shadow_05 by トム@株＆不動産投資・Webプログラマー (@roby_tom) on CodePen.
緑色の影がぼやかされて描画されていることが分かります。このようにbox-shadowプロパティに３つの値を与えた場合、3つ目の値は「影のぼかし半径」の指定と解釈されます。
次に4つ目の「影の広がり半径」の値(10px)を与えてみましょう。3つ目のぼかし半径はゼロとします。
実行例（６）
See the Pen shadow_06 by トム@株＆不動産投資・Webプログラマー (@roby_tom) on CodePen.
影のサイズが右側および下側に10px分大きくなっていることが分かります。ちょっと不格好な影になってしまいました。4つ目のオプションはあまり使うシーンはないかもしれません。
次に応用例として、上記の実行例（４）で実際にボタンを押した時に影をへこませるアニメーションを追加してみたいと思います。
応用例
See the Pen shadow_07 by トム@株＆不動産投資・Webプログラマー (@roby_tom) on CodePen.
ポイントは、CSSで.btn:activeを定義し、その中でbox-shadowで影を付けた分だけボタンの位置をずらしています(position:relative, top 10px, left 10pxの部分)。そしてクリックしている間は影をなしにするために、box-shadow:none、を指定しています。こうすればボタンをクリックしている間はボタンが影の位置に移動し影が見えなくなることで「実際にボタンを押してる感」を出すことが可能です。
色々使える、filterプロパティのdrop-shadow()関数
3つめのプロパティは、CSSのfilterプロパティに属するdrop-shadow()関数です。この関数の特徴は、①文字にも要素にも使える、②透過画像に直接影を付けることができる、の２点です。
filter: drop-shadow(横方向の基準点からの距離, 縦方向の基準点からの距離, 影のぼかし半径, 影の色);drop-shadow関数の引数はbox-shadowと全く同じです。但し影のぼかし半径は省略できません。
まず特徴①を確認してみます。次の実行例（７）は実行例（１）のbox-shadowの部分をdrop-shadowに変更し、全く同じ影を付けてみます。
実行例（７）
See the Pen shadow_08 by トム@株＆不動産投資・Webプログラマー (@roby_tom) on CodePen.
実行例（１）と全く同じ影を付けられているのが分かります。下の実行例（８）では実行例（４）のボタンの影を、drop-shadowでつけてみます。
実行例（８）
See the Pen shadow_09 by トム@株＆不動産投資・Webプログラマー (@roby_tom) on CodePen.
実行例（４）と全く同じ影を付けられていることが分かります。このようにdrop-shadowは文字にも要素にも使えることが確認できました。
そして次に、特徴②の「透過画像に直接影を付けることができる」ことを確認しましょう。サンプルの透過画像は以下です。
この画像に対し、drop-shadowで赤色の影を付けた結果を以下に示します。
実行例（９）
See the Pen shadow_10 by トム@株＆不動産投資・Webプログラマー (@roby_tom) on CodePen.
このように透過画像に直接影を付けられていることが分かります。もしdrop-shadowをbox-shadowに変更すると、長方形である画像を１つの要素と捉え、画像の枠に対し影を付ける動作となります。透過画像に影を付けたい場合はdrop-shadowを使うことを覚えておきましょう。
以上、CSSで文字や要素に影を付ける３つの方法について解説しました