CurvyCornersはCSS3に対応した最強の角丸JavaScriptだ！

2010年04月02日雑記 #JavaScript #CSS #CSS3

今、作っているサイトで透過の角丸JavaScriptが必要になって、いいものは無いかと探していると「CurvyCorners」というJavaScriptが見つかりました。

Googleで CurvyCorners - Google 検索を検索してみると、以下のようなエントリーがヒットします。（上位5件を表示）

CurvyCorners - Beautiful rounded corners for your HTML boxes
角丸javascriptライブラリ『curvyCorners』を使ってみる[to-R]（2006年6月18日）
jQueryを使って簡単に角丸を作れるjQuery curvyCorners | バシャログ。（2007年12月3日）
角丸作成javascript「curvyCorners」｜skuare.net（2007年10月21日）
画像を使わず、角にアンチエイリアスをかけて丸くする「curvyCorners」 - GIGAZINE（2006年6月16日）

これを見ると随分古くからある JavaScript であるという事が分かります。そして、凄いのは 2010年4月1日に新しいベータ版がリリースされています。開発が止ってないんです。

We've just released CurvyCorners 2.1 BETA.

Over 50 bug fixes and improvements:

Improved browser detection

Lots of CSS detection improvements

Support for CSS3 shorthand selectors

Support for native CSS border-radius support in Opera 10.5

and many more.

もっと、もっと、凄いのは CSS3 の border-radius を認識して自動で出来ない子(IE)のために角丸を作ってくれる事です。 これ凄くないですか？なので、利用方法としては、この curvycorners.src.js を＜head＞内で読み込むだけでOK なのです。どんな角丸なのかはCSS側で設定しましょう！

.myBox {

    /* Do rounding (native in Firefox and Safari) */
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
}

Firefox や Safari では、動作しないようになっているようです。デモについては以下の本家をご覧下さい。

curvyCorners Demo 4

そして、ダウンロードは以下からどうぞ！

Downloads - CurvyCorners - Beautiful rounded corners for your HTML boxes

CurvyCornersはCSS3に対応した最強の角丸JavaScriptだ！

関連記事