Corner.jsを使う。(2)

[Corner.js]
http://www.netzgesta.de/corner/
角を丸くするJavaScript。
今回はダウンロードファイルに同胞されている
もう一つのJavaScript[justcorners.js]の使い方を調べてみました。

【設定方法】<script type="text/javascript" src="xxxx/justcorners.js"></script>
※注意
一つのファイルでjustcorners.jsとcorner.jsの両方を使うことはできません。
(あとから宣言した方だけが有効になる。)
何かが競合してしまうようです。

【指定方法:corners】
指定するclass名は「corners」となります。
iradiusの指定はオプション指定となり、デフォルトではiradius[16]が適用されます。
<img src='xxx' class='corners'/>
夏は向日葵。

【角を丸くする位置を指定:iradiae】
オプションクラスに「iradiae[数字4桁]」を使うと、どの角を丸くするのか指定できます。
[左上|右上|左下|右下]の順で、[1]を指定したところだけ、角が丸くなります。
<img src='xxx' class='corners iradiae1001'/>
夏は向日葵。

画像を並べて表示するときなどにおもしろい効果が得られそうですね。
<元画像>
sample

<iradiaeを使って並べてみる:1>
sample sample
sample sample
※IEだときちんと四つ葉のクローバー風に表示されないようです。
(左上を[0]と指定するときちんと表示されない)

<iradiaeを使って並べてみる:2>
sample sample sample

こんな風に丸くする箇所の配置を組み合わせるとおもしろそうです。

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください