[CSS]実用的なものをはじめ、ちょっと使ってみたくなるCSS3の14のテクニック

実用的なものをはじめ、お遊び的なものなど、ちょっと使ってみたくなるCSS3のテクニックを紹介します。

Deaxon's CSS playground

[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
スライドとフェードのアニメーションでテキストが切り替わります。