[CSS]実用的なものをはじめ、ちょっと使ってみたくなるCSS3の14のテクニック
Post on:2010年10月28日
実用的なものをはじめ、お遊び的なものなど、ちょっと使ってみたくなるCSS3のテクニックを紹介します。
![サイトのキャプチャ](/wp-content/uploads-2010-2d/2010102809.png)
[ad#ad-2]
下記に、CSS playgroundで掲載されているデモを紹介します。
これからもどんどん増えるといいなあ。
※デモを楽しむには、Chromeでご覧ください。
![デモのキャプチャ](/wp-content/uploads-2010-2d/2010102810-01.png)
Clickable accordion
アコーディオンパネル、パネルごとの個別URLも有効。
![デモのキャプチャ](/wp-content/uploads-2010-2d/2010102810-02.png)
Animated nav
カラー変更と形状がアニメーションするナビゲーション。
![デモのキャプチャ](/wp-content/uploads-2010-2d/2010102810-03.png)
Animated text background
アニメーションするテキスト。
![デモのキャプチャ](/wp-content/uploads-2010-2d/2010102810-04.png)
Image-free bouncing tooltip
画像を使用せずに、バウンドのアニメーションをするツールチップ。
![デモのキャプチャ](/wp-content/uploads-2010-2d/2010102810-05.png)
Circle zoom
円状にアニメーションでズーム。
![デモのキャプチャ](/wp-content/uploads-2010-2d/2010102810-06.png)
Float centering
フロートした要素を左右の中央に配置。
![デモのキャプチャ](/wp-content/uploads-2010-2d/2010102810-07.png)
Image gallery
アニメーションで表示される画像ギャラリー、個別URLも有効。
[ad#ad-2]
![デモのキャプチャ](/wp-content/uploads-2010-2d/2010102810-08.png)
Image-free gradient overflow
画像を使用せずに、グラデーションをオーバーフロー。
![デモのキャプチャ](/wp-content/uploads-2010-2d/2010102810-09.png)
HTTP headers stylesheet
HTTPヘッダでスタイルシートファイルをリンク。
※Fx, Opのみ
![デモのキャプチャ](/wp-content/uploads-2010-2d/2010102810-10.png)
Multi-column layout
マルチカラムのレイアウト。
![デモのキャプチャ](/wp-content/uploads-2010-2d/2010102810-11.png)
Vertical sliding nav
スライドのアニメーションで切り替わるタブコンテンツ、個別URLも有効。
![デモのキャプチャ](/wp-content/uploads-2010-2d/2010102810-12.png)
Image-free spinner
画像を使用しないプリローダーのアニメーション。
![デモのキャプチャ](/wp-content/uploads-2010-2d/2010102810-13.png)
Tabs
フェードのアニメーションで切り替わるタブコンテンツ、個別URLも有効。
![デモのキャプチャ](/wp-content/uploads-2010-2d/2010102810-14.png)
Text switch
スライドとフェードのアニメーションでテキストが切り替わります。
sponsors