ボックスを角丸にするNifty Corners

Check このエントリーをはてなブックマークに追加

配布元：Nifty Corners
ライセンス：自由に使用してよい(ただし、配布者であるhtml.itについて言及すること)

Nifty Cornersはボックスを角丸にする為のjsライブラリになります。

設置方法

ダウンロードしたniftyCorners.cssとniftyPrint.css、nifty.jsを読み込み、Rounded関数でNifty Cornersを実行します。

<link rel="stylesheet" type="text/css" href="niftyCorners.css">
<link rel="stylesheet" type="text/css" href="niftyPrint.css" media="print">
<script type="text/javascript" src="nifty.js"></script>
<script type="text/javascript">
window.onload=function(){
	if(!NiftyCheck())return;
	Rounded("セレクタ","背景色","前景色");
}
</script>

セレクタはCSSセレクタと同じ記述で角丸にしたい要素を指定します。

Rounded("div#nifty","背景色","前景色");
RoundedTop("div#nav li","背景色","前景色");

背景色や前景色は色を指定します。背景色にtransparent(透明)を設定することも可能です。

Rounded("セレクタ","#FFF","前景色");
RoundedTop("セレクタ","transparent","前景色");

第4引数に『small』を設定することにより、小さめの角丸を設定することも可能です。

Rounded("セレクタ","背景色","前景色","small");

Roundedはすべての角を角丸にしますが、上辺の2つだけ角丸にするRoundedTop、下2つだけ角丸にするRoundedBottomなどもあります。

RoundedTop("セレクタ","背景色","前景色");
RoundedBottom("セレクタ","背景色","前景色");

サンプルは配布ページに多数掲載されてます。

スポンサードリンク

コメント

カテゴリー：ライブラリ 画像 角丸