Quoted: 前回は、『Scriptを使わないCSSエフェクト、Tipsいろいろ』をご紹介いたしました。 今回は、逆にjQueryを使ったサンプル集です。なるべく簡単に使えそうな、プラグインを中心にまとめてみました。

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

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

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

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のコードを書くのが楽しくなる」というのがモットーらしい。