Search

jQuery plugin角丸ライブラリ

  1. Anti-aliased Roundd corners〔アンチエイリアスのかかった角丸〕
  2. Cornerz v0.6〔Canvas/VML使用〕
  3. curvyCorners〔アンチエイリアスのかかった角丸〕
  4. JQuery Corner Gallery〔角丸をはじめいろいろな角スタイルにできる〕
  5. jQuery Corners 0.3〔綺麗なアンチエイリアスのかかった角丸〕
  6. Liquid Canvas〔Canvas使用〕
  7. Rcorners jQuery Plugin〔画像と要素を角丸にする〕

Anti-aliased Roundd corners
アンチエイリアスのかかった角丸

unknown

Anti-aliased Round Corners with JQuery

GNU Lesser General Public License
jquery.js v1.2.6、jquery.curvycorners.min.js

アンチエイリアスのかかった角丸を生成するjQueryプラグイン。 画像も角丸にできます。

設置イメージ設置イメージ
HEAD 
<!-- JS -->
<script src="jquery-1.2.6.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.curvycorners.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
  $(function(){
    $('.c').corner();
    $('.inner').corner({tl:{radius:6},tr:{radius:6},bl:{radius:6},br:{radius:6}});
    $('.c2').corner({tl:{radius:16},tr:false,bl:false,br:{radius:16},antiAlias:true,autoPad:true,validTags:["div"]});
  });
</script>
<!-- CSS -->
<style type="text/css">
  .container { border:0; text-align:center; margin:64px auto; width:375px; }
  .inner { padding:0; border:1px solid #fff; }
  .c  { background:#000; border:4px solid #000; padding:6px 0; color:#fff; }/* padding to make innner rounded box fit; top bottom padding = inner radius */
  .c p { margin:15px; }
  .c2 { background:transparent url("背景画像URL") no-repeat 0 0; padding:20% 8px; border:8px solid #000; color:#fff; height:220px; }
</style>
HTML 
<!-- ブロック要素を角丸に -->
<div class="container">
  <div class="c">
    <div class="inner">
      <p>テキスト</p>
    </div>
  </div>
</div>
<!-- ブロック要素の背景に画像を指定して画像を角丸に見せる -->
<div class="container">
  <div class="c2">
    <p>テキスト</p>
  </div>
</div>
設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>Anti-aliased Round Corners with JQuery | 設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/jquery.curvycorners.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $('.c').corner();
                $('.inner').corner({tl:{radius:6},tr:{radius:6},bl:{radius:6},br:{radius:6}});
                $('.c2').corner({tl:{radius:16},tr:false,bl:false,br:{radius:16},antiAlias:true,autoPad:true,validTags:["div"]});
            });
        </script>
        <!-- CSS -->
        <style type="text/css">
            .container { border:0; text-align:center; margin:64px auto; width:375px; }
            .inner { padding:0; border:1px solid #fff; }
            .c  { background:#000; border:4px solid #000; padding:6px 0; color:#fff; }/* padding to make innner rounded box fit; top bottom padding = inner radius */
            .c p { margin:15px; }
            .c2 { background:transparent url("http://farm4.static.flickr.com/3064/3053382328_d2b1a4c111.jpg") no-repeat 0 0; padding:20% 8px; border:8px solid #000; color:#fff; height:220px; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1><a href='http://blue-anvil.com/archives/anti-aliased-rounded-corners-with-jquery'>Anti-aliased Round Corners with JQuery</a> | 設置サンプル</h1>
<!-- CODE -->
            <div class="container">
                <div class="c">
                    <div class="inner">
                        <p><strong>“Krispy Kreme Doughnuts”</strong></p>
                        <p>新宿サザンテラスにいつも長蛇の列を作っている人気のドーナツ屋さん「クリスピー・クリーム・ドーナツ（Krispy Kreme Doughnuts）」。ドーナツの箱がピザの箱みたいでアメリカン！すごく甘いのかと思ってたら、意外とほどよい甘さ。生地はややわらかくてふんわりしてました！</p>
                    </div>
                </div>
            </div>

            <div class="container">
                <div class="c2">
                    <p>汐留シティの41階にある「The OREGON Bar &amp; Grill」<br>夜景がすごくきれいでした。<br>東京タワーを目の前に、豪華なディナーを楽しめます。</p>
                </div>
            </div>
<!-- / CODE -->
        </div>
    </body>
</html>

Cornerz v0.6
Canvas/VML使用

2009/3/23

Cornerz v0.6

IE6、IE7、Firefox 2、Safari 3、Opear 9、Chrome
［JS］jquery.js v1.2.6+、cornerz.js

Canvas/VMLを使用して角丸を生成するjQueryプラグイン。

オプションで、角の大きさ、枠線の太さ・色、枠線を描画する角（"tr br tr bl"）、背景色などの指定ができます。 インラインの角丸やタブ風の角丸ボックスも簡単に作成することができます。

設置イメージ設置イメージ
設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>Cornerz v0.6 | 設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/cornerz.js"></script>
        <script type="text/javascript">
            $(function(){
                $('.curve').cornerz();
                $('#xxx').cornerz({radius:50});
                $('.curveC').cornerz({radius:30, corners:"tl br"});
                $('.curveD').cornerz({radius:10});
                $('.tab').cornerz({radius:10, corners:"tl tr"});
                $('h3').cornerz({radius:40, borderWidth:0, corners: "tl"});
            });
        </script>
        <!-- CSS -->
        <style type="text/css">
            body { background-color:#fff; }
            h3 { margin:20px 0; padding:5px 5px 5px 20px; background:#333; color:#fff; z-index:1000; display:inline; font-size:15px; }
            #xxx { background:url(/content/img/pattern.jpg); }
            .tab { margin:10px 5px 10px 10px; padding:2px 5px; border:1px solid #000; border-bottom:0; background:#ccc; display:inline; float:left; }
            .tab:hover { background:#000; color:#fff; cursor:pointer }
            .test1 { margin:10px; padding:2px; background:#87c3aa; text-align:center; text-transform:lowercase; }
            .test1:hover { background:#796c4a; color:#fff; cursor:pointer; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1><a href='http://labs.parkerfox.co.uk/cornerz/'>Cornerz v0.6</a> | 設置サンプル</h1>
<!-- CODE -->
            <h2>例1</h2>
            <h3>H3要素</h3>

            <h2>例2：枠線なし</h2>
            <div class="curve test1" style="border:0;">border:0; display:"block";</div>

            <h2>例3：枠線指定</h2>
            <div class="curve test1" style="border:5px solid #87c3aa; background:#796c4a; padding:20px; color:#87c3aa;">border:5px solid #87c3aa; background:#796c4a; padding:20px; color:#87c3aa;</div>

            <h2>例4：入れ子</h2>
            <div id="xxx" class="curve50 test1" style="border:10px solid #87c3aa; color:#0a0; line-height:100px;">
                <span style="background:#fff; color:#87c3aa; font-weight:bold; padding:20px;">
                    background:#fff;color:#87c3aa; font-weight:bold; padding:10px;
                </span>
            </div>

            <h2>例5：幅を指定</h2>
            <div class="curve test1" style="border:1px solid #000; color:#fff; background:#87c3aa; display:block; width:200px;" >border:1px solid #000;<br>color:#fff;<br>background:#87c3aa;<br>display:block<br> width:200px;</div>

            <h2>例6：インライン</h2>
            <div class="curve test1" style="border:3px solid #796c4a;  display:inline;">3px solid #796c4a;  display:inline;</div>インライン。

            <h2>例7：タブ風</h2>
            <div class="cf">
                <div class='tab'>タブ</div>
                <div class='tab'>なが～～～～いタブ</div>
                <div class='tab'>...</div>
                <div class='tab' style=' background: pink' >pink</div>
                <div class='tab' style=' background: yellow' >yellow</div>
                <div class='tab' style=' background: yellow' >yellow</div>
                <div class='tab' style=' background: #fcf'>#fcf</div>
            </div>
<!-- / CODE -->
        </div>
    </body>
</html>

curvyCorners
アンチエイリアスのかかった角丸

unknown

curvyCorners

IE、Firefox、Safari、Opera／win、mac対応
LGPL
jquery.js v1.2.6、curvycorners.js

要素をアンチエイリアスのかかった角丸にするjQueryプラグイン。 要素に背景画像を指定すれば、画像を角丸表示することができます。 四隅の各角の大きさを個別に指定でき、角にアンチエイリアスの有無も指定できます。

設置イメージ設置イメージ
HEAD 
<!-- JS -->
<script src="jquery-1.2.6.min.js" type="text/javascript" charset="utf-8"></script>
<script src="curvycorners.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
  $(function(){
    settings = {
      tl:{ radius:20 },
      tr:{ radius:20 },
      bl:{ radius:20 },
      br:{ radius:20 },
      antiAlias:true,
      autoPad:true,
      validTags:["div"]
    }
    var myBoxObject = new curvyCorners(settings, "mybox1");
    myBoxObject.applyCornersToAll();
    var myBoxObject2 = new curvyCorners(settings, "mybox2");
    myBoxObject2.applyCornersToAll();
    var myBoxObject3 = new curvyCorners(settings, "mybox3");
    myBoxObject3.applyCornersToAll();
  });
</script>
<!-- CSS -->
<style type="text/css">
  .wrap   { width:420px; text-align:center; margin:0; padding:70px 0; background:transparent url(背景画像URL) repeat 0 0; }
  .mybox1 { margin:0 auto; padding:20px; border:0px solid #fff; color:#fff; width:60%; text-align:left; background-color:#85bca7; border:3px solid #fff; }
  .mybox2 { margin:0 auto; color:#fff; width:320px; height:200px; text-align:left; background:transparent url(背景画像URL) no-repeat 0 0; }
  .mybox3 { margin:0 auto; color:#fff; width:320px; height:200px; text-align:left; background-image:url(背景画像URL); background-repeat:no-repeat; border:5px solid #85bca7; }
</style>
HTML 
<!-- 角丸 -->
<div class="wrap">
  <div class="mybox1">テキスト</div>
</div>
<!-- 角丸（背景画像指定） -->
<div class="wrap">
  <div class="mybox2"></div>
</div>
<!-- 画像（背景画像指定＋枠線付き） -->
<div class="wrap">
  <div class="mybox3"></div>
</div>
設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>curvyCorners | 設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/curvycorners.js"></script>
        <script type="text/javascript">
            $(function(){
                settings = {
                    tl:{ radius:20 },
                    tr:{ radius:20 },
                    bl:{ radius:20 },
                    br:{ radius:20 },
                    antiAlias:true,
                    autoPad:true,
                    validTags:["div"]
                }
                var myBoxObject = new curvyCorners(settings, "mybox1");
                myBoxObject.applyCornersToAll();
                var myBoxObject2 = new curvyCorners(settings, "mybox2");
                myBoxObject2.applyCornersToAll();
                var myBoxObject3 = new curvyCorners(settings, "mybox3");
                myBoxObject3.applyCornersToAll();
            });
        </script>
        <!-- CSS -->
        <style type="text/css">
            .wrap   { width:420px; text-align:center; margin:0; padding:70px 0; background:transparent url(/content/img/pattern.jpg) repeat 0 0; }
            .mybox1 { margin:0 auto; padding:20px; border:0px solid #fff; color:#fff; width:60%; text-align:left; background-color:#85bca7; border:3px solid #fff; }
            .mybox2 { margin:0 auto; color:#fff; width:320px; height:200px; text-align:left; background:transparent url("http://farm4.static.flickr.com/3222/2974008614_736e2d5b50.jpg") no-repeat 0 0; }
            .mybox3 { margin:0 auto; color:#fff; width:320px; height:200px; text-align:left; background-image:url("http://farm4.static.flickr.com/3222/2974008614_736e2d5b50.jpg"); background-repeat:no-repeat; border:5px solid #85bca7; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1><a href='http://www.curvycorners.net/index.php'>curvyCorners</a> | 設置サンプル</h1>
<!-- CODE -->
            <h2>角丸</h2>
            <div class="wrap">
                <div class="mybox1">
                    新宿サザンテラスにいつも長蛇の列を作っている人気のドーナツ屋さん「クリスピー・クリーム・ドーナツ（Krispy Kreme Doughnuts）」。ドーナツの箱がピザの箱みたいでアメリカン！すごく甘いのかと思ってたら、意外とほどよい甘さ。生地はややわらかくてふんわりしてました！
                </div>
            </div>

            <h2>角丸（背景画像指定）</h2>
            <div class="wrap">
                <div class="mybox2"></div>
            </div>

            <h2>画像（背景画像指定＋枠線付き）</h2>
            <div class="wrap">
                <div class="mybox3"></div>
            </div>
<!-- / CODE -->
        </div>
    </body>
</html>

JQuery Corner Gallery
角丸をはじめいろいろな角スタイルにできる

unknown

JQuery Corner Gallery

MIT、GPL
jquery.js v1..2.6、jquery.corner.js

角丸だけでなく、様々な形状の角を作成できるjQueryプラグイン。 どの角にどのスタイルを適用するかや、角のサイズなど自由に指定することができます。

設置イメージ設置イメージ
HEAD 
<!-- JS -->
<script src="jquery-1.2.6.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.corner.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
  $(function(){
    $("#Round").corner();
  });
</script>
<!-- CSS -->
<style type="text/css">
  div.cn { width:18em;padding:20px;margin:1em;background:#0075d9;color:#fff;text-align:center;}
</style>
HTML 
<div class="cn" id="Round">テキスト</div>
設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>JQuery Corner Gallery | 設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/jquery.corner.js"></script>
        <script type="text/javascript">
            $(function(){
                /* Available Corner Effects */
                $("#Round").corner();
                $("#Bevel").corner("bevel");
                $("#Notch").corner("notch");
                $("#Bite").corner("bite");
                $("#Cool").corner("cool");
                $("#Sharp").corner("sharp");
                $("#Slide").corner("slide");
                $("#Jut").corner("jut");
                $("#Curl").corner("curl");
                $("#Tear").corner("tear");
                $("#Fray").corner("fray");
                $("#Wicked").corner("wicked");
                $("#Sculpt").corner("sculpt");
                $("#Long").corner("long");
                $("#Dog").corner("dog");
                $("#Dog2").corner("dog2");
                $("#Dog3").corner("dog3");

                /* Choose Your Corner */
                $("#Bevel_top").corner("bevel top");
                $("#Bite_tl").corner("bite tl");
                $("#Bottom").corner("bottom");
                $("#Notch_bl").corner("notch bl");
                $("#Dog_tr").corner("dog tr");
                $("#Cool_tl_br").corner("cool tl br");

                /* Specify Size */
                $("#Round_30").corner("30px");
                $("#Round_5").corner("5px");
                $("#Cool_20").corner("cool 20px");
                $("#Sharp_20").corner("sharp 20px");
                $("#Bite_30").corner("bite 30px");
                $("#Wicked_20").corner("wicked 20px");
                $("#Dog_20").corner("dog 20px");
                $("#Dog2_30").corner("dog2 30px");
                $("#Dog3_30").corner("dog3 30px");

                /* Mix and Match */
                $("#Round_Bevel").corner( "bottom").corner("top bevel");
                $("#Round_Notch").corner( "br top").corner("notch bl 20px");
                $("#Crazy").corner("jut tl 20px").corner("dog tr 20px").corner("bite bl 15px").corner("notch br");

                /* Fun Stuff */
                $("#LeftHalfofArrow").corner("sharp tr br 20px");
                $("#RightHalfofArrow").corner("sharp tl bl 20px");
            });
        </script>
        <!-- CSS -->
        <style type="text/css">
            div.cn { float:left;width:18em;padding:20px;margin:1em;background:#0075d9;color:#fff;text-align:center;}
            div.fun  { margin:2px; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1><a href='http://methvin.com/jquery/jq-corner.html'>JQuery Corner Gallery</a> | 設置サンプル</h1>
<!-- CODE -->
            <h2>Available Corner Effects</h2>
            <div class="cn" id="Round">$(this).corner();</div>
            <div class="cn" id="Bevel">$(this).corner("bevel");</div>
            <div class="cn" id="Notch">$(this).corner("notch");</div>
            <div class="cn" id="Bite">$(this).corner("bite");</div>
            <div class="cn" id="Cool">$(this).corner("cool");</div>
            <div class="cn" id="Sharp">$(this).corner("sharp");</div>
            <div class="cn" id="Slide">$(this).corner("slide");</div>
            <div class="cn" id="Jut">$(this).corner("jut");</div>
            <div class="cn" id="Curl">$(this).corner("curl");</div>
            <div class="cn" id="Tear">$(this).corner("tear");</div>
            <div class="cn" id="Fray">$(this).corner("fray");</div>
            <div class="cn" id="Wicked">$(this).corner("wicked");</div>
            <div class="cn" id="Sculpt">$(this).corner("sculpt");</div>
            <div class="cn" id="Long">$(this).corner("long");</div>
            <div class="cn" id="Dog">$(this).corner("dog");</div>
            <div class="cn" id="Dog2">$(this).corner("dog2");</div>
            <div class="cn" id="Dog3">$(this).corner("dog3");</div>
            <br clear="all" />

            <h2>Choose Your Corner</h2>
            <div class="cn" id="Bevel_top">$(this).corner("bevel top");</div>
            <div class="cn" id="Bite_tl">$(this).corner("bite tl");</div>
            <div class="cn" id="Bottom"> $(this).corner("bottom");</div>
            <div class="cn" id="Notch_bl">$(this).corner("notch bl");</div>
            <div class="cn" id="Dog_tr">$(this).corner("dog tr");</div>
            <div class="cn" id="Cool_tl_br">$(this).corner("cool tl br");</div>
            <br clear="all" />

            <h2>Specify Size</h2>
            <div class="cn" id="Round_30">$(this).corner("30px");</div>
            <div class="cn" id="Round_5"> $(this).corner("5px");</div>
            <div class="cn" id="Cool_20"> $(this).corner("cool 20px");</div>
            <div class="cn" id="Sharp_20">$(this).corner("sharp 20px");</div>
            <div class="cn" id="Bite_30"> $(this).corner("bite 30px");</div>
            <div class="cn" id="Wicked_20">$(this).corner("wicked 20px");</div>
            <div class="cn" id="Dog_20">$(this).corner("dog 20px");</div>
            <div class="cn" id="Dog2_30">$(this).corner("dog2 30px");</div>
            <div class="cn" id="Dog3_30">$(this).corner("dog3 30px");</div>
            <br clear="all" />

            <h2>Mix and Match</h2>
            <div class="cn" id="Round_Bevel">$(this).corner( "bottom").corner("top bevel");</div>
            <div class="cn" id="Round_Notch">$(this).corner( "br top").corner("notch bl 20px");</div>
            <div class="cn" id="Crazy">$(this).corner("jut tl 20px").corner("dog tr 20px").corner("bite bl 15px").corner("notch br");</div>
            <br clear="all" />

            <h2>Fun Stuff</h2>
            <div class="cn fun" id="LeftHalfofArrow">$(this).corner("sharp tr br 20px");</div>
            <div class="cn fun" id="RightHalfofArrow">$(this).corner("sharp tl bl 20px");</div>
            <br clear="all" />
<!-- / CODE -->
        </div>
    </body>
</html>

jQuery Corners 0.3
綺麗なアンチエイリアスのかかった角丸

unknown

jQuery Corners 0.3

Phone、Chrome、Firefox、Safari 2+、Opera 9.0+、IE 6+ 他
MIT／GPL
jquery.js、jquery.corners.js

アンチエイリアスのかかった綺麗な角丸ボックスや角丸ボタンを作成できるjQueryプラグイン。

ブロック要素だけでなく、リンク要素や送信ボタンを角丸ボタンに変換することができます。 角の大きさやアンチエイリアスの有無など、いろいろなオプションが用意されています。

設置イメージ設置イメージ
設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>jQuery Corners 0.3 | 設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/jquery.corners.js"></script>
        <script type="text/javascript">
            $(function(){
                /* 例1：シンプルな角丸 */
                $('.rounded').corners();
                /* 例2：角の大きさを指定 */
                $('.rounded2').corners("30px 10px");
            });
        </script>
        <!-- CSS -->
        <style type="text/css">
            .cn { background-color:#acc; padding:5px; }
            /* 例4、例5 */
            .button { outline:none; border:0; text-decoration:none; cursor:pointer; white-space:nowrap; vertical-align:middle; display:-moz-inline-box; display:inline-block; overflow:visible; }
            .button { color:#000; background-color:#acc; padding:5px 7px; }
            .button:hover { background-color:#cee; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1><a href='http://www.atblabs.com/jquery.corners.html'>jQuery Corners 0.3</a> | 設置サンプル</h1>
<!-- CODE -->
            <h2>例1：シンプルな角丸</h2>
            <div class="cn rounded">&#36;(function(){<br>
            　　&#36;('.rounded').corners();<br>
            });</div>

            <h2>例2：角の大きさを指定</h2>
            <div class="cn rounded2">&#36;(function(){<br>
            　　&#36;('.rounded2').corners("30px 10px");<br>
            });</div>

            <h2>例3：要素のクラスでオプションを上書き</h2>
            <div class="cn  rounded {30px}">class="cn rounded {30px}"</div>

            <h2>例4：a要素を角丸ボタンに変換</h2>
            <p><a href="#" onclick="alert('Hello, World!');return false;" class="rounded {transparent} button">ボタン</a>をクリックすると、アラートが表示されます。</p>

            <h2>例5：フォームボタンをa要素に変換</h2>
            <form action="#">
                <input type="submit" value="送信ボタン" class="button" />　
                <input type="submit" value="送信ボタン" class="rounded {transparent} button" />　
                <input type="button" value="ボタン" class="button" onclick="alert('OK!'); return false;" />　
                <input type="button" value="ボタン" class="rounded {transparent} button" onclick="alert('OK!'); return false;" />　
            </form>
<!-- / CODE -->
        </div>
    </body>
</html>

Liquid Canvas
Canvas使用

2009/4/14

Liquid Canvas

MIT
Firefox、IE 6+、Safari、Chrome
jquery.js、liquid-canvas.js、liquid-canvas-plugins.js、excanvas.js（for IE）

画像を使用せずに、HTMLキャンバス要素内に角丸ボックスをを描画できるjQueryライブラリ。 複数のプラグインを連結して使用することで、様々なグラフィックを描画することができます。

設置イメージ設置イメージ
設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>Liquid Canvas | 設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <!--[if IE]><script type="text/javascript" src="/content/lib/jquery/liquid_canvas/excanvas.js"></script><![endif]-->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/liquid_canvas/liquid-canvas.js"></script>
         <script type="text/javascript" src="/content/lib/jquery/liquid_canvas/liquid-canvas-plugins.js"></script>
        <script type="text/javascript">

            // register a user defined plugin
            $.registerLiquidCanvasPlugin({
                name: "mandala",
                paint: function(area){
                    var opts = this.opts;
                    var ctx = area.ctx;
                    var min = area.width > area.height ? area.height : area.width;
                    var trans = min / 2;
                    var rad = trans / 3;
                    for (var i = 0; i < 10; ++i) {
                    area.save();
                    ctx.translate(area.width / 2, area.height / 2);
                    ctx.rotate(i * 2*Math.PI / 10);
                    ctx.translate(trans - rad, 0);
                    area.width = 30;
                    area.height = 30;
                    this.action.paint(area);
                    area.restore();
                  }
                }
            });

            // First we wait until the document is completely loaded using the handy
            // jQuery "ready" method.
            $(window).load(function() {
            // No we can paint our canvas. Something rounded with a shadow ;-)
                $("#example").liquidCanvas("[shadow border gradient] => roundedRect{radius:50}");
                var i = 0;
                $(".example").each(function(){
                    var element = $(this);
                    element.children("h3").html("Example " + (i++));
                    var example = element.children("em").text();
                    element.liquidCanvas(example);
                });
            });
        </script>
        <style type="text/css">
            #example { width:400px; margin:20px 0; padding:40px; }
          .example { width:27.9%; margin:1% 0 1% 1%; padding:2%; float:left; overflow:hidden; }
          * html .example { height:1%; }
          .example h3 { margin:0 0 10px 0; }
          .example em { color:#affe73; overflow:auto; background:#000; padding:5px; margin:10px 0; display:block; }
          * html .example em { overflow:scroll; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1><a href='http://www.ruzee.com/content/liquid-canvas'>Liquid Canvas</a> | 設置サンプル</h1>
<!-- CODE -->
            <h2>基本的な例</h2>
            <div id="example">Liquid Canvasの基本的な例です。</div>
            <h2>プラグインを使用したサンプルいろいろ</h2>
            <div class="cf">
                <div id="example0" class="example">
                    <h3>Example</h3>
                    プラグインは、描画操作に使用されます。このfillプラグインは、rectangleプラグイン上で適用されます。この操作は、アプリケーションによって呼び出されます。Grayは、デフォルトのfillスタイルです。
                    <em>fill => rect</em>
                </div><!-- #example0 -->
                <div id="example1" class="example">
                    <h3>Example</h3>
                    プラグインにプロパティを指定することができます。シンタックスはCSSのようなものです。
                    <em>fill{color:#f80} => rect</em>
                </div><!-- #example1 -->
                <div id="example2" class="example">
                    <h3>Example</h3>
                    プラグインは丸くて長方形のために存在しています。
                    <em>fill{color:#fff} => roundedRect</em>
                </div><!-- #example2 -->
            </div>
            <div class="cf">
                <div id="example3" class="example">
                    <h3>Example</h3>
                    プラグインのプロパティは、右側に指定することもできます。角のカーブを大きくしたい場合は、下記のようにします。
                    <em>fill => roundedRect{radius:80}</em>
                </div><!-- #example3 -->
                <div id="example4" class="example">
                <h3>Example</h3>
                    配列のようなシンタックスを使用するとプラグインを連結できます。「shadow」と「fill」両方のプラグインをroundedRect上で連結します。
                    <em>[shadow fill] => roundedRect</em>
                </div><!-- #example4 -->
                <div id="example5" class="example">
                    <h3>Example</h3>
                    複数のプラグインを連結できます。それぞれのプラグインにプロパティを設定できます。
                    <em>[shadow border{color:#fff} fill{color:#f80}] => roundedRect{radius:30}</em>
                </div><!-- #example5 -->
            </div>
            <div class="cf">
                <div id="example6" class="example">
                <h3>Example</h3>
                    たくさんのプラグインが存在します。「gradient」プラグインは、好きなように描くことが出来ます。
                    <a href="http://en.wikipedia.org/wiki/Canvas_(HTML_element)">HTML canvas</a>
                    <em>gradient{from:rgba(255, 255, 255, 0.2); to:#888;} => roundedRect{radius:50}</em>
                </div><!-- #example6 -->
                <div id="example7" class="example">
                    <h3>Example</h3>
                    アプリケーションは、1枚のキャンバス内に複数の操作を実行するには、プラグインをカンマ区切りで指定します。
                    <em>gradient => rect, border => roundedRect{radius:60}</em>
                </div><!-- #example7 -->
                <div id="example8" class="example">
                <h3>Example</h3>
                    操作を連結する別の方法として、括弧を使用すると、アプリケーションの操作を再帰的に利用することができます。
                    <em>fill => rect, mandala => ([border{color:#fff; width:1}] => roundedRect{radius:10})</em>
                </div><!-- #example8 -->
            </div>
<!-- / CODE -->
        </div>
    </body>
</html>

Rcorners jQuery Plugin
画像と要素を角丸にする

unknown

Rcorners jQuery Plugin

MIT／GPL
［JS］jquery.js、jquery.rcorners.js
［CSS］jquery.rcorner.css
［画像］background.gif

rcornerクラスを指定した画像またはdiv要素をラップしてシンプルな角丸ボックスを生成するjQueryプラグイン。

▼角丸部分には、下記の画像を使用し、CSSで四隅に配置しています。

設置イメージ設置イメージ
設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>jQuery Corners 0.3 | 設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/jquery_rcorner/jquery.rcorner.js"></script>
        <script type="text/javascript">
            $(function(){
                $('.rcorner').rcorner();
            });
        </script>
        <!-- CSS -->
        <link rel="stylesheet" type="text/css" href="/content/lib/jquery/jquery_rcorner/jquery.rcorner.css" />
        <style type="text/css">
            div.container { width:500px; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1><a href='http://aaronvanderzwan.com/blog/2009/01/rounded-corners-in-jquery-with-image/'>Rcorners jQuery Plugin</a> | 設置サンプル</h1>
            <p>▼rcornerクラスを指定した画像またはdiv要素を角丸にします。</p>
<!-- CODE -->
            <div class="container">
                <div class="rcorner" style="background-color:#ff6699; padding:10px;">
                    <h3>アボカド シーザーサラダ@アボガドダイニング Platinum Lounge</h3>
                    <p>よくわからないけどちゃんとアボガド入りです！クリーミーなシーザードレッシングとアボガドの相性がとってもよかったです。</p>
                </div>
                <br clear="all" />
                <img src="http://farm4.static.flickr.com/3514/3274514408_1800118ded_s.jpg" class="rcorner" />
                <br clear="all" />
                <img src="http://farm4.static.flickr.com/3514/3274514408_1800118ded_t.jpg" class="rcorner" />
                <br clear="all" />
                <img src="http://farm4.static.flickr.com/3514/3274514408_1800118ded_m.jpg" class="rcorner" />
                <br clear="all" />
                <img src="http://farm4.static.flickr.com/3514/3274514408_1800118ded.jpg" class="rcorner" />
                <br clear="all" />
            </div>
<!-- / CODE -->
        </div>
    </body>
</html>

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか？

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手（1行メッセージも送れます♪）

TOP / ご利用上の注意点 / リンクについて / RSS

©2025 PHP & JavaScript Room All Rights Reserved.

pagetop