最近のWebはフラットデザインが流行ってますが、まだまだ現役ってことで使ってて新たな発見もありましたのでまとめておきたいと思います。
基本の指定方法
box-shadowもtext-shadowも名前が違うだけで指定方法は同じで、4つの長さ、影の色、影の向きからなっています。 なので、説明はbox-shadowで書いていきますがtext-shadowも同じだと思って見てください。
box-shadow:1px 1px 1px 1px #454545; text-shadow:1px 1px 1px 1px #454545 inset;
4つの長さについては以下のとおりです。
1番目の値は横方向の長さです。正の値だと右へ、負の値だと左へ影が付きます。【必須】
2番目の値は縦方向の長さです。正の値だと下へ、負の値だと上へ影が付きます。【必須】
3番目の値はぼかし距離です。値が大きいほどぼかしが強くなり、値が0の場合にはぼかしが入りません。
4番目の値は広がり距離です。正の値を指定すると影の向きに広がり、負の値を指定すると縮小します。
3番目と4番目は言葉にするのが難しいのですが…実際に試してみるのが早いので以下のパターン別で確認します。 あと、影の向きというのは何も指定しなければ外側に向きますが、insetキーワードを指定すると内側の影に変更される指定の事です。 ちなみに長さの指定に % を使用することはできません。
パターン別の表示を確認してみる
このSampleBoxに影を付けて色々確認してみたいと思います。
基本編
横方向の影のみ指定した場合
下方向の影のみ指定した場合
縦横の影を指定した場合
縦横の影を指定した場合（マイナス指定）
縦横の影を指定した場合（inset指定）
おっと、ここで予想と違う表示になりました。内側の右と下に影ができるかと思いきや、inset を指定した場合は左と上に影ができます。なので長さをマイナスにしてやると逆になりますね。
縦横の影を指定した場合（マイナス・inset指定）
ぼかし編
縦横の影にぼかし(5px)を指定した場合
影にぼかしが入ってちょっといい感じになりました。この数値を大きくすればそれだけぼかしが強くなるので試してみます。
縦横の影にぼかし(30px)を指定した場合
左と上にもぼかしが出てきてしまいました。やり過ぎ注意です。
縦横の影の長さを0にしてぼかしを指定した場合
縦横の長さが0だと通常は何も影が表示されませんが、ぼかしを入れると薄っすらとオーラみたいな感じで表示されます。これは :hover擬似クラスとかと合わせて使ってもいいかもしれない。
また、私的にはここが結構ポイントだと思ってて、影を付けるというのは要素の後ろに別の要素があると考えれば理解しやすいのかなと思います。その要素をずらす事によって影を演出してるという感じですね。
広がり編
問題はこれですね。広がりってなんやねんと。とりあえず試してみます。
縦横の影にぼかし(5px)と広がり(5px)を指定した場合
通常のぼかし状態から上下左右に広がる感じなんですね。あまり使う機会ないかなと思ってましたが以下のような使い方が出来ます。
応用編
1辺だけにぼかしを表示したい場合
例えば下側だけにぼかし付きの影を出したいと思った場合、まずこのように記述すると思います。
しかし、ぼかしの場合は上でも書いたように横が0pxでも少し出ちゃうんですよね。じゃあどうするかと言うと広がりをマイナス指定します。
こうすることによって左右の影が見えなくなって下側だけに表示させる事ができました。どのくらいマイナスにするかというのは、ぼかしの大きさによっても変わってきますので確認しながら設定しましょう。
影を複数指定する場合
複数指定したい場合はbox-shadow:5px 5px red, -5px -5px blue;のようにカンマ区切りで続けて指定していきます。順番は最初に指定した影から優先して（下に重なってくイメージ）表示されます。text-shadowを使って文字にも同じように複数指定してみましたが、こんな感じのを実際に使う事はまあ無い…かな？
以上、これらは基本の話しですが応用すれば以下サイトのようなカッコイイデザインもできるようになります。
http://www.paulund.co.uk/creating-different-css3-box-shadows-effects
