フラットUIに影をつける「jQuery Flat Shadow」
jQuery Flat ShadowはjQuery/JavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。
フラットUIが人気ですが、あまりにもシンプルであるために物足りないと感じる人も多いようです。そこでフラットUIっぽさを壊さないようにメリハリをつけられるのがjQuery Flat Shadowです。
[](http://images.moongift.jp/2013/08/Screenshot 2013-08-26 11.10.30.1377574862.png)
例です。文字から影ができています。
[](http://images.moongift.jp/2013/08/Screenshot 2013-08-26 11.10.37.1377574865.png)
向き、色も自由に変えられます。
[](http://images.moongift.jp/2013/08/Screenshot 2013-08-27 12.35.49.1377574869.png)
英数字だけではありません。
使い方の例です。文字の背景色も設定できます。
jQuery Flat Shadowでは文字に対して影を設定できます。特に画像を用意したりする必要はないので手軽に使えそうです。面白いのは文字を解析して行っているので英数字のみならず平仮名や漢字に対しても適用ができることでしょう。
MOONGIFTはこう見る
影をつけてしまうと立体感が出来てしまうのでフラットUIには不向きかなと思うのですが、影が単色で塗りつぶしたような感じなのでそこまで気にならないかもしれません。あまり多用するのはお勧めしませんが、特に目立たせたい部分に使うとインパクトが出るのではないでしょうか。
一言でフラットUIといってもWindows 8 UIスタイル、iOS7風と様々に存在します。デザイナーごとに解釈が違うと言っても良いかもしれません。だからこそ自分なりのカスタマイズをしてフラットUIをより楽しんでみるのが良さそうです。