角丸作成javascript「curvyCorners」

角丸作成javascriptは多くありますが、ライブラリに依存しないのはあまりありませんでした。
curvyCornersは単一スクリプトで角丸を実現できるjavascriptです。

使用方法
curvyCornersからファイル群をダウンロードし、以下のように記述します。
<script type="text/javascript" src="http://yourdomain/rounded_corners_lite.inc.js"></script>
<script type="text/javascript">
window.onload = function()
{
settings = {
tl: { radius: 70 }, //左上の半径
tr: { radius: 20 }, //右上の半径
bl: { radius: 10 }, //左下の半径
br: { radius: 20 }, //右下の半径
antiAlias: true, //アンチエイリアス
autoPad: true //オートパディング
}
var myBoxObject = new curvyCorners(settings, "class名");
myBoxObject.applyCornersToAll();
}
</script>
あとはclass名でコンテンツを囲めば完了です。
なお、角丸作成javascript「curvyCorners」サンプルでは以下のようなCSSを指定しています。
<style type="text/css">
.class名 {
margin: 50px 0 0;
color: #ffffff;
width: 60%;
padding: 20px;
background-color: #333;
}
</style>

2007年10月21日

前の記事：Movable TypeでPHP化せずにページ分割するプラグイン「PageBute」
次の記事：印刷範囲を指定できるjavascript「jPrintArea」

関連記事

• [mootools]softrRounded
• 画像も角丸にするjavascript「roundedcorners」
• jQueryベースの角丸javascript「JQuery Curvy Corners」
• jQueryベースの角丸javascript「jQuery Corner」
• 角を丸めるjavascript「Nifty Corners Cube」

• jQueryでLightBoxを実現するjavascript「jQuery Lightbox Plugin (balupton edition)」
• ビジュアル面で最高のタイムピッカーJavaScript「nogray_time_picker」
• BOMBERMAN JAVASCRIPT GAME by mootools.js
• 3ステップで表をソート＆値を検索できるjavascript「dataTables」
• Movable Type 4.2にバージョンアップ
• ページの目次を自動で作成するjavascript「jqTOC」
• JavaScriptライブラリ「raphael」で図を描く
• ニューデザイン
• Widgetboxで手軽にRSS型ウィジェット（ガジェット）を作る
• 奥から手前にズームするJavaScript「Spacegallery.js」