skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

角を丸めるjavascript「Nifty Corners Cube」

｜ ｜ ｜ ｜ ｜ ｜ ｜

Web2.0と言われて増えたのが、グラデーション、画像を水面に映ったかの様に反射させる、透過などなど。
そして角を丸くすること。
Nifty Corners Cubeが提供するのはそんな角丸作成javascript。

使用方法
Nifty Corners Cubeからダウンロードしたniftycube.jsとniftyCorners.cssを同じディレクトリにアップロード。
（もしくは、niftycube.jsのl.setAttribute("href","niftyCorners.css");）を絶対パスに）
次にheadに以下のスクリプトを書き込みます。
<script type="text/javascript" src="http://yourdomain/niftycube.js"></script>
<script type="text/javascript">
window.onload=function(){
Nifty("角丸の対象タグ");
}
</script>
またオプションとして、以下のような指定ができます。
tl：左上の角を丸に
tr：右上の角を丸に
bl：左下
br：右下
top：上部
bottom：下部
left：左辺
right：右辺
all：全部 (default)
none：角丸なし
small：丸の大きさ小 (2px)
normal：丸の大きさ普通 (default、5px)
big：丸の大きさ大 (10px)
transparent：透過？
fixed-height：CSSによって指定されている時に適用？
same-height：CSSによって第一のパラメーターに高さが指定されている時、ほかも統一に？
角を丸めるjavascript「Nifty Corners Cube」サンプル

記事作成：2007年09月27日

前の記事：グラフ作成javascriptの最高峰「amCharts」
次の記事：見栄えの良いカラーピッカーjavascript「Color Sphere」