JavaScriptの演算でdivブロックの角を丸にする「curvyCorners」

GIGAZINE - 画像を使わず、角にアンチエイリアスをかけて丸くする「curvyCorners」

「curvyCorners」はフリーのJavaScriptで、角が丸いコーナーをDIV要素で簡単に作ることが可能。特徴は画像を使ったのと同じくらい角がなめらかに丸くなる点と、いたって利用が簡単な点。

curvyCorners Demo 1
curvyCorners Demo 2

んー、やってることはなんとなく想像できそうだが自分でプログラミングできるかというとできねーだろうなあ。(^_^;
ボーダーまでちゃんと対応してるところが素晴らしい。
まあ、プログラムの中身は理解してなくても、使い方さえわかれば利用できるので便利です。

問題というかやはりJavascriptで画像処理という高度なことするので表示速度はどうかな？って感じがする。デモはひとつのブロックを処理してるだけだが、画面のあちこちのブロックで処理した場合表示完了までどれぐらいかかるだろう？試してみないとなんともいえん。(^_^;

下記ページからダウンロード。
curvyCorners Downloads

使い方の詳細は、 curvyCorners - JavaScript Rounded Corners and more.を見てもらえばわかると思う。（手抜きな説明だ。(^_^;）

簡単にいえば、ダウンロードして解凍したら、rounded_corners.inc.jsファイルがあるので、それを使いたいページと同じとこにでもアップロードしておいて、HTMLファイル内でscriptタグを使いそのrounded_corners.inc.jsファイルを読み込んでおき、さらにコーナーの初期値設定＆処理実行用のスクリプトをヘッダにでもコピペして、あとはbody内で角丸にしたいdiv要素にidを（例ではmyDiv）付けといて、その名前をさっきの処理実行用スクリプト内のエレメント指定するところのid文字列（myDiv）を一致させればいい。（myDivのスタイルはスタイルシートで設定すればよいかと）

---

前の記事 « Google Mapsと新聞記事の組み合わせによるハザードマップ
次の記事 » 禁煙カウンタ PHP版 ver.1.1 にバージョンアップ
ぞうさんちv3 トップページへ

---