最近の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
【角を丸くする：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: