Quoted: Noupe is a design weblog created to inspire creativity by sharing innovative resources and websites to bloggers, freelancers and web designers.

売れない、人が来ないホームページにならない為の、インターネットの知識とブログネタ

This is only a temporary teaser page. We are working hard on the new site, which will be released together with the final version of jQuery UI 1.5. Thank you for your patience.

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が必要です。

Quoted: 売れない、人が来ないホームページにならない為の、インターネットの知識とブログネタ

Web Design Wallのエントリー「jQuery Tutorials for Designers」から、JavaScriptのライブラリ「jQuery」が視覚的にどのように動作するかデモと共に解説してる10のチュートリアルを紹介します。

jQuery Tutorials for Designers

Simple slide panel
シンプルなスライドするパネル

Simple disappearing effect
シンプルなクローズボタンがあるパネル

Chain-able transition effects
変化するエフェクトをもつボックス

Accordion #1
Accordion #2
アコーディオン

Animated hover effect #1
Animated hover effect #2
ホバー時のアニメーションエフェクト

Entire block clickable
ブロックエリアのクリッカブル

Collapsible panels
リストで作成されたパネル

Imitating the WordPress Comment Backend
アニメーションする背景

Image replacement gallery
イメージギャラリー

Styling different link types
拡張子でアイコンを変更

ファイルサイズわずか10キロバイト、CSSの1から3、XPathをサポートし、Internet Explorer、Firefox、Safari、Operaで動作します。「JavaScriptのコードを書くのが楽しくなる」というのがモットーらしい。