CSS3を使った実用的なスタイルシートのテクニックのまとめ
Post on:2012年8月28日
パネルやボタン、タブ、メニューなどのUIエレメントの美しいスタイルをはじめ、ホバー時のエフェクト、レイアウトなど、CSS3を使ったスタイルシートのテクニックを紹介します。
※CSS3を使っているため、対応ブラウザはIEでは9くらいのものが多いです。7対応もあります。
![デモのキャプチャ](/wp-content/uploads-2012/2012082801-19.png)
Growl Notification
ダーク系のカラースキームが美しいGrowl風の通知パネル。
![デモのキャプチャ](/wp-content/uploads-2012/2012082801-01.png)
Slide In Image Box
ホバーで画像がスライドし、アニメーションで背景が変更します。
![デモのキャプチャ](/wp-content/uploads-2012/2012082801-04.png)
Animated Content Tabs with CSS3
アニメーションで切り替わるタブコンテンツ。
![デモのキャプチャ](/wp-content/uploads-2012/2012082801-05.png)
Accordion with CSS3
チェックボックス・ラジオボタンを使ったアコーディオン。
![デモのキャプチャ](/wp-content/uploads-2012/2012082801-16.png)
Orman Clark’s Vertical Navigation Menu: The CSS3 Version
アニメーションで開閉する垂直型のアコーディオン。
![デモのキャプチャ](/wp-content/uploads-2012/2012082801-03.png)
Animated Profile Popover
アニメーションでふんわり表示されるツールチップ。
![デモのキャプチャ](/wp-content/uploads-2012/2012082801-22.png)
Sliding Tags
ホバーでカウンターがスライドするタグ。
![デモのキャプチャ](/wp-content/uploads-2012/2012082801-10.png)
Making an Impressive Product Showcase with CSS3
CSS3のダイナミックなエフェクトを伴ったスライド。
![デモのキャプチャ](/wp-content/uploads-2012/2012082801-06.png)
Create the Illusion of Stacked Elements with CSS3 Pseudo-Elements
アニメーションで動く写真を重ねたエフェクト。
![デモのキャプチャ](/wp-content/uploads-2012/2012082801-28.png)
a CSS3 animated hover effect
ホバー時にサムネイル画像をキラっとさせるエフェクト。
![デモのキャプチャ](/wp-content/uploads-2012/2012082801-29.png)
CSS3 ordered list styles
OL要素のスタイル例。
![デモのキャプチャ](/wp-content/uploads-2012/2012082801-07.png)
CSS3 Family Tree
ホバーで子がハイライトするツリー。
![デモのキャプチャ](/wp-content/uploads-2012/2012082801-11.png)
CSS3 Pricing Table
ホバーで拡大する価格表。
![デモのキャプチャ](/wp-content/uploads-2012/2012082801-12.png)
コメントのスタイル
タイムライン風スタイルのコメント。
![デモのキャプチャ](/wp-content/uploads-2012/2012082801-14.png)
Menu with Notification Badges
通知バッジ付きのメニュー。
![デモのキャプチャ](/wp-content/uploads-2012/2012082801-15.png)
CSS3 Dropdown Menu
アニメーションで開閉するドロップダウン型のメニュー。
![デモのキャプチャ](/wp-content/uploads-2012/2012082801-17.png)
Pure CSS3 LavaLamp Menu
アニメーションでハイライトが移動するLavaLamp風メニュー。
![デモのキャプチャ](/wp-content/uploads-2012/2012082801-18.png)
CSS3 Breadcrumbs
CSS3でスタイルするパンくず。
![デモのキャプチャ](/wp-content/uploads-2012/2012082801-20.png)
Inset Side Navigation
明るいブルーを基調にしたインセット型のメニュー。
![デモのキャプチャ](/wp-content/uploads-2012/2012082801-25.png)
CSS-Only Responsive Layout with Smooth Transitions
CSSだけで実装したスムースにスクロールするレスポンシブ レイアウト。
![デモのキャプチャ](/wp-content/uploads-2012/2012082801-27.png)
Page Transitions with CSS3
ダイナミックなアニメーションで切り替わるシングルページ用エフェクト。
![デモのキャプチャ](/wp-content/uploads-2012/2012082801-02.png)
An explanation of the CSS animation on Apple's iPhone 4S webpage
iPhoneページの打ち出しのダイナミックなスライド。
![デモのキャプチャ](/wp-content/uploads-2012/2012082801-23.png)
Animated Download Button With CSS3
ホバー時に天地からスライドするボタン。
![デモのキャプチャ](/wp-content/uploads-2012/2012082801-24.png)
Animating CSS3 Gradients
ホバー時にCSS3グラデーションがアニメーションするボタン。
![デモのキャプチャ](/wp-content/uploads-2012/2012082801-13.png)
YouTube Popup Buttons
ホバーでポップアップするYouTube風のボタン。
![デモのキャプチャ](/wp-content/uploads-2012/2012082801-30.png)
Circular 3D Buttons
アイコンフォントを使った3Dの円形のボタン。
![デモのキャプチャ](/wp-content/uploads-2012/2012082801-31.png)
CSS3 Brushed-Metal Buttons
メタルの質感が美しいボタン。
![デモのキャプチャ](/wp-content/uploads-2012/2012082801-26.png)
umbrUI
input要素を画像も余分なHTMLも無しで美しくスタイル。
![デモのキャプチャ](/wp-content/uploads-2012/2012082801-21.png)
Dark Login Form
変わった配置のボタンを備えたログインフォーム。
![デモのキャプチャ](/wp-content/uploads-2012/2012082801-08.png)
iOS Style Popover
ホバーエフェクトを伴ったiOSスタイルのチェックボックス。
![デモのキャプチャ](/wp-content/uploads-2012/2012082801-09.png)
Apple Like Login Form
Apple風のメタリックなログインフォーム。
sponsors