Faves for this Web page

• mippe - Mar 10 2008 | css, Javascript, jQuery

  Roundcorners Canvasは、タブ・ボタン・テーブルなどの矩形に、簡単な記述で角丸を実装できるスクリプトです。

  Roundcorners Canvas
  デモページ

  上記のキャプチャ画像のように、divの矩形(赤の箇所)と、リストのタブ(Lookの箇所)を角丸にするには、下記のコードを使用します。

  view plaincopy to clipboardprint?$(document).ready(function() { $(”#mainblock”).corner(”30px”); $(”#menu ul li”).corner(”8px top”); }); $(document).ready(function() {
  $(”#mainblock”).corner(”30px”);
  $(”#menu ul li”).corner(”8px top”);
  });
  Roundcorners Canvasは、ほかにも多様な角丸を実装することができます。
  デモページ 2

  1pxの角丸のサンプル

  border colorのサンプル

  背景色のサンプル

  背景画像のサンプル

  ネストされたdivのサンプル

  lineのサンプル

  四辺で異なる角丸のサンプル

  tableのサンプル

  インライン要素のサンプル

  エフェクトのサンプル

  Roundcorners CanvasはjQueryのプラグインのため、実装にはjquery.jsが必要です。
• sionmaru - Mar 11 2008 | js, CSS, library
• adoioda - Mar 11 2008 | CSS, jQuery, sitetips
• infosizu - Mar 11 2008 | js, デザイン, Ajax
• livesizu - Mar 11 2008 | DesignTIPS, web, CSS
• livad11 - Mar 10 2008 | 角丸四角, デザイン, round
• dottikana - Mar 10 2008 | web, デザイン, *制作tips
• kyaayk - Mar 10 2008 | javascript, デザイン, design
• ads7sda - Mar 10 2008 | jQuery, js, javascript
• liad01 - Mar 10 2008 | とりあえずクリップ, design, 角丸四角
• sangoda - Mar 10 2008 | デザイン, design, web