Corner.jsを使う。(1)

最近のHTMLでは、やはり、角を丸くするデザインが流行りですね。
角を丸くするのには、画像を使ったり、
画像とCSSを組み合わせたりと色々な方法があるのですが、
角を丸くするJavaScriptがありました。

[Corner.js]
http://www.netzgesta.de/corner/
前にここで紹介した、Glossy.jsの発展版とも言えます。

ここのサイトでは「Canvas|Vml|Image effects」というコンセプトで、
色々なJavaScriptを公開しています。

[CVI-Projects]
http://www.netzgesta.de/cvi/
もうすぐ、全部紹介し終わりますね。
※でも、増え続けています。

【ダウンロードと設定】
Corner.js→Downloadから、[corner.js 1.5]をダウンロード。
(ダウンロードファイル名は[corner.zip])
フォルダ内にあるJavaScriptファイル(corner.js)をHTMLに取り込みます。
<script type="text/javascript" src="xxxx/corner.js"></script>
もう一つ含まれているJavaScriptファイル(justcorners.js)は、
角丸の効果だけを簡単に適用させるJavaScriptのみが記述されています。
(corner.jsにはglossy.jsのようなつや効果も含まれています。)
justcorners.jsは指定方法も少し変わります。

【基本的な適用方法:corner】
今回はこちらの画像を使用します。夏ですね。
夏は向日葵。 Photo by smiledogFROM Zorg
himawari.jpg

【角を丸くする:iradius】
imgタグに以下のclassを指定することで、角を丸くすることができます。
<img src='xxx' class='corner iradius[数値]'/>
iradiusには、角を丸くする度合いを指定します。(ピクセル単位:min=0、max=100)
iradiusを指定しないと角が丸くなりません。
<img src='xxx' class='corner iradius30'/>
夏は向日葵。

★Corner.jsでは角を丸くする以外の効果も出すことができます。

【角をシャープにする:ishade】
画像にコントラストのあるフレーム効果を与えることができます。
class「ishade[数値]」を指定します。
<img src='xxx' class='corner ishade[数値]'/>
ishadeには、シャープにする度合いを指定します。(パーセント:min=0、max=100)
<img src='xxx' class='corner ishade75'/>
夏は向日葵。

【画像に影をつける:ishadow】
画像の後ろに影をつけることができます。
class「ishadow[数値]」を指定します。
<img src='xxx' class='corner ishadow[数値]'/>
ishadowには、影の度合いを指定します。(パーセント:min=0、max=100)
<img src='xxx' class='corner ishadow40'/>
夏は向日葵。

【影の効果を反転させる:inverse】
ishadowを指定したときに、inverseも一緒に指定すると、
画像の前面に影をつけることができます。
<img src='xxx' class='corner ishadow40 inverse'/>
夏は向日葵。

これらを組み合わせると、陰影のある角の丸い画像を表現できます。
<img src='xxx' class='corner iradius30 ishade20 ishadow10'/>
夏は向日葵。
<img src='xxx' class='corner iradius30 ishadow10 inverse'/>
夏は向日葵。

次回はjustcorners.jsのほうについて説明します。

One comment:

  1. ピンバック: そんなこと

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This site uses Akismet to reduce spam. Learn how your comment data is processed.