ITエンジニア/デザイナ向けにオープンソースを毎日紹介

jQuery Flat ShadowはjQuery/JavaScript製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。

フラットUIが人気ですが、あまりにもシンプルであるために物足りないと感じる人も多いようです。そこでフラットUIっぽさを壊さないようにメリハリをつけられるのがjQuery Flat Shadowです。


例です。文字から影ができています。


向き、色も自由に変えられます。


英数字だけではありません。

使い方の例です。文字の背景色も設定できます。

jQuery Flat Shadowでは文字に対して影を設定できます。特に画像を用意したりする必要はないので手軽に使えそうです。面白いのは文字を解析して行っているので英数字のみならず平仮名や漢字に対しても適用ができることでしょう。


MOONGIFTはこう見る

影をつけてしまうと立体感が出来てしまうのでフラットUIには不向きかなと思うのですが、影が単色で塗りつぶしたような感じなのでそこまで気にならないかもしれません。あまり多用するのはお勧めしませんが、特に目立たせたい部分に使うとインパクトが出るのではないでしょうか。

一言でフラットUIといってもWindows 8 UIスタイル、iOS7風と様々に存在します。デザイナーごとに解釈が違うと言っても良いかもしれません。だからこそ自分なりのカスタマイズをしてフラットUIをより楽しんでみるのが良さそうです。

jQuery Flat Shadow by Pete R. | The Pete Design

peachananr/flat-shadow

 

MOONGIFTの関連記事

  • DevRel
  • Com2