前の記事 ≪:第18回 AjaxうきうきWatchが公開-Apollo参戦でWidget開発者の争奪戦が激化
次の記事 ≫:PHPで動画形式の各種変換が行えるffmpegのラッパークラスライブラリ「ff...

JavaScriptでボックス要素の角丸を自由自在に操るライブラリ「RUZEE.Borders」

2007年03月27日-はてなブックマーク

スポンサード リンク
[PR] 日々膨大に出現するJS/CSSライブラリ等を意識にとどめておく方法
ruzee.com - Steffen Rusitschka ShadedBorder - JavaScript Round Corners with Drop Shadow
Rouding corners with JavaScript has a long history. Everything started on 16th of March 2005 with Nifty Corners and loads of other libs followed.

JavaScriptでボックス要素の角丸を自由自在に操るライブラリ「RUZEE.Borders」。
同様のライブラリに Nifty Corners がありますが、これを更に進化させ、使いやすく、高速に、かつより多くのブラウザに対応したものだそうです。
ブラウザ対応は、Firefox, Internet Explorer 6.0以降, Safari, Opera 9.0以降 。



次のような角丸タブも自由自在。



使い方は非常に簡単。
次がサンプルコード。

<script type="text/javascript" src="shadedborder.js">
<style type="text/css">
/* CSSコード */
</style>

<div id="round_me" class="sb">
<p>角丸ブロック</p>
</div>

<script type="text/javascript">
var border = RUZEE.ShadedBorder.create({ corner:8, shadow:16, border:2 });
border.render('round_me');
</script>

シンプルHTMLで、JavaScriptコードもたったの2行という簡単さ。
特にJavaScriptの知識がなくとも、コピペで簡単に使えます。

関連エントリ

関連の記事検索:JavaScript, CSS, 角丸, ライブラリ, Webデザイン, デザイン
スポンサード リンク

By.KJ : 2007年03月27日 07:06 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)