[CSS]実用的なものをはじめ、ちょっと使ってみたくなるCSS3の14のテクニック
Post on:2010年10月28日
sponsors
実用的なものをはじめ、お遊び的なものなど、ちょっと使ってみたくなるCSS3のテクニックを紹介します。

[ad#ad-2]
下記に、CSS playgroundで掲載されているデモを紹介します。
これからもどんどん増えるといいなあ。
※デモを楽しむには、Chromeでご覧ください。

Clickable accordion
アコーディオンパネル、パネルごとの個別URLも有効。

Animated nav
カラー変更と形状がアニメーションするナビゲーション。

Animated text background
アニメーションするテキスト。

Image-free bouncing tooltip
画像を使用せずに、バウンドのアニメーションをするツールチップ。

Circle zoom
円状にアニメーションでズーム。

Float centering
フロートした要素を左右の中央に配置。

Image gallery
アニメーションで表示される画像ギャラリー、個別URLも有効。
[ad#ad-2]

Image-free gradient overflow
画像を使用せずに、グラデーションをオーバーフロー。

HTTP headers stylesheet
HTTPヘッダでスタイルシートファイルをリンク。
※Fx, Opのみ

Multi-column layout
マルチカラムのレイアウト。

Vertical sliding nav
スライドのアニメーションで切り替わるタブコンテンツ、個別URLも有効。

Image-free spinner
画像を使用しないプリローダーのアニメーション。

Tabs
フェードのアニメーションで切り替わるタブコンテンツ、個別URLも有効。

Text switch
スライドとフェードのアニメーションでテキストが切り替わります。
sponsors