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

フラットなデザインが流行ですが、単純に単色でシンプルに表現する段階は過ぎています。Googleの言うマテリアルデザインのように動きのある表現を通じてUXを高める動きもあります。

そこで今回はjCornerを紹介します。フラットUIの中でも映える、効果的な表現です。

jCornerの使い方

こちらがjCornerを使った表現です。紙のように端が折れています。
こちらがjCornerを使った表現です。紙のように端が折れています。

単純に角を折るだけでなく、色が自動的に濃くなっていたりするのがいい感じです。

<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="jCorner.js" type="text/javascript"></script>
<div id="paper"></div>

HTMLはこのように。

$('#paper').jCorner();

JavaScriptはこのように記述すると角が折れるスタイル設定が適用されます。

昔は角丸にするライブラリが流行りましたが、それに続くフラットの中でも活かせるちょっとしたアクセントとして使えるのではないでしょうか。

jCornerはjQuery/JavaScript製のオープンソース・ソフトウェア(MIT License)です。

zhangwenli.com/jCorner/

Ovilia/jCorner

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2