jCorner – フラットUIで使える角折りデザイン
フラットなデザインが流行ですが、単純に単色でシンプルに表現する段階は過ぎています。Googleの言うマテリアルデザインのように動きのある表現を通じてUXを高める動きもあります。 そこで今回はjCornerを紹介します。フラットUIの中でも映える、効果的な表現です。
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）です。