CSS3を使った実用的なスタイルシートのテクニックのまとめ

パネルやボタン、タブ、メニューなどのUIエレメントの美しいスタイルをはじめ、ホバー時のエフェクト、レイアウトなど、CSS3を使ったスタイルシートのテクニックを紹介します。
※CSS3を使っているため、対応ブラウザはIEでは9くらいのものが多いです。7対応もあります。

Growl Notification
ダーク系のカラースキームが美しいGrowl風の通知パネル。

Slide In Image Box
ホバーで画像がスライドし、アニメーションで背景が変更します。

Animated Content Tabs with CSS3
アニメーションで切り替わるタブコンテンツ。

Accordion with CSS3
チェックボックス・ラジオボタンを使ったアコーディオン。

Orman Clark’s Vertical Navigation Menu: The CSS3 Version
アニメーションで開閉する垂直型のアコーディオン。

Animated Profile Popover
アニメーションでふんわり表示されるツールチップ。

Sliding Tags
ホバーでカウンターがスライドするタグ。

Making an Impressive Product Showcase with CSS3
CSS3のダイナミックなエフェクトを伴ったスライド。

Create the Illusion of Stacked Elements with CSS3 Pseudo-Elements
アニメーションで動く写真を重ねたエフェクト。

a CSS3 animated hover effect
ホバー時にサムネイル画像をキラっとさせるエフェクト。

CSS3 ordered list styles
OL要素のスタイル例。

CSS3 Family Tree
ホバーで子がハイライトするツリー。

CSS3 Pricing Table
ホバーで拡大する価格表。

コメントのスタイル
タイムライン風スタイルのコメント。

Menu with Notification Badges
通知バッジ付きのメニュー。

CSS3 Dropdown Menu
アニメーションで開閉するドロップダウン型のメニュー。

Pure CSS3 LavaLamp Menu
アニメーションでハイライトが移動するLavaLamp風メニュー。

CSS3 Breadcrumbs
CSS3でスタイルするパンくず。

Inset Side Navigation
明るいブルーを基調にしたインセット型のメニュー。

CSS-Only Responsive Layout with Smooth Transitions
CSSだけで実装したスムースにスクロールするレスポンシブ レイアウト。

Page Transitions with CSS3
ダイナミックなアニメーションで切り替わるシングルページ用エフェクト。

An explanation of the CSS animation on Apple's iPhone 4S webpage
iPhoneページの打ち出しのダイナミックなスライド。

Animated Download Button With CSS3
ホバー時に天地からスライドするボタン。

Animating CSS3 Gradients
ホバー時にCSS3グラデーションがアニメーションするボタン。

YouTube Popup Buttons
ホバーでポップアップするYouTube風のボタン。

Circular 3D Buttons
アイコンフォントを使った3Dの円形のボタン。

CSS3 Brushed-Metal Buttons
メタルの質感が美しいボタン。

umbrUI
input要素を画像も余分なHTMLも無しで美しくスタイル。

Dark Login Form
変わった配置のボタンを備えたログインフォーム。

iOS Style Popover
ホバーエフェクトを伴ったiOSスタイルのチェックボックス。

Apple Like Login Form
Apple風のメタリックなログインフォーム。