トップページ > Ajaxライブラリ使用サンプル集 > Cornerで角丸の画像に
Ajaxライブラリ使用サンプル集
Cornerで角丸の画像に
「corner.js」を使うと、四角い画像を、簡単に角丸に見せることができる。
下の画像は。
「corner.js」はドイツの Netzgesta社によるライブラリ。このサイトには他にも面白いライブラリが数多く公開されている。
非営利目的のサイトと個人サイトでは無料ライセンス。ライセンスについての詳細は上記サイトへ。
「corner.js」をダウンロードし、htmlに読み込ませる
「corner.js」のページからダウンロードし、<head>部に読み込ませる。
<script src="../js/corner.js" type="text/javascript"></script> ←自分がjsファイルを置いたパスを書く
画像に「class」で指定する
画像<img>部に「corner iradius0(〜50)」で指定する。デフォルトは0。iradius+数値が無いと無反応。
<img src="img/corner.jpg" alt="" width="170" height="100" class="corner iradius30" />
オプションので指定
角を丸くするだけでなく「シェードを付けて立体にする」「ドロップシャドウを付ける」「内側にシャドウをつける」などができる。
●シェードを付けて立体にする（ishade）「ishade0(〜100)」を加えると、シェードを付けて立体的に浮き出して見せる。数値は0〜100まで。デフォルトは0。
<img src="img/corner.jpg" alt="" width="170" height="100" class="corner ishade70" />
●ドロップシャドウを付ける（ishadow）
「ishadow0(〜100)」を加えると、ドロップシャドウを付ける。数値は0〜100まで。デフォルトは0。
<img src="img/corner.jpg" alt="" width="170" height="100" class="corner ishadow50" />
●内側にシャドウをつける（inverse）
ドロップシャドウ「ishadow0(〜100)」を指定した時、「inverse」も加えると、影が内側につく。
<img src="img/corner.jpg" alt="" width="170" height="100" class="corner ishadow50 inverse" />
"corner iradius10 ishade30 ishadow50"
"corner iradius10 ishadow50 inverse"