css3の情報がかなり増えてきたので
一旦まとめておきます。基本的にはIE
が非対応なので、実用はまだまだこれ
からという印象でしたが、iPhoneやiPad
の普及や、IEにも対応させることが可能
なライブラリの出現でかなり実用性が
上がったように思います。

そういうわけで、ブックマークしておいたcss3関連の情報をまとめて整理してみることにしました。重複した情報は出来る限り削いだつもりです。

※jQueryなどのJavascriptや、HTML5と組み合わせたTips等の情報は出来る限り割愛しました。

リファレンス / 専門サイト

まずは基本と教科書になりそうなサイトを抑える

1. W3C / 公式です。セレクタ一覧
2. CSS3リファレンス / 日本語のリファレンスサイト
3. Webkit CSS Properties / Webkit対応プロパティの一覧。iOSも有り
4. CSS Infos / css1～3の総比較表
5. Web Browser CSS Support / ブラウザ別のサポート状況。見やすいです
6. CSS3 Selectors / こちらもブラウザ別サポート状況
7. Vendor-prefixed CSS Property / ベンダープレフィックスの一覧表
8. CSS3 Pre-Reference / 国内のリファレンス的サイト
9. CSS 3 Cheat Sheet (PDF) / チートシート
10. CSS HappyLife ZERO / css3カテゴリです
11. 各ブラウザで先行実装しているCSS3プロパティまとめ / 個人的に一番よく見てます
12. SafariのCSS3拡張 / Safariオンリだけど見やすいので

サンプル

css3でどういう事が出来るのか。css3をリセットするブックマークレットを併用すると便利です。

国内

少ないですが、国内のサンプルはネタ系やチュートリアル込みが多いのでそちらに集まっています。

1. CSS3のtransitionプロパティでアニメーションを試してみた
2. css3のtransitionプロパティでアニメーションサンプルをいろいろ作ってみた
3. css3のtransformの実装サンプル
4. jsdo.it / おなじみコード共有サイト。css3タグにリンクしています
5. CSS3 「gradient」と「@font-face」 / css3を駆使した可愛らしいデザイン
6. CSS3 Demo Sample / 見やすいサンプルが沢山あります

海外

かなり端折りました

1. Text Depth of Field Effect / テキストシャドウと変形プロパティでクールな視差効果を表現
2. BonBon / css3のみで可愛い3Dボタン
3. CSS3 Dropdown Menu / js無しで美しいドロップダウンメニュー
4. Minimalistic Navigation / フライアウトするミニマルメニュー
5. Radioactive Buttons / 定期的にボタンを光らせる
6. CSS3 Buttons / 美しいボタンをcss3で
7. CSS3 Click Chart / サンプルを一覧で見れる
8. Pure CSS3 Horizontal Accordion / cssのみでアコーディオンコンテンツ実装
9. CSS Gradient Text / 効果的なテキストエフェクトのサンプル集
10. 404 / css3を使ったユニークな404ページ
11. Windows 7 start menu / Win7のようなメニューをcss3で実装
12. Fancy Image Hover / css3を使ったマウスオーバーエフェクト
13. Polaroids / ポラロイド風ギャラリー
14. speech bubbles / cssで噴出しいろいろ
15. Animated button / アニメーションするかわいい3Dボタン
16. 3D text / リアルな3Dテキストをcssで表現
17. Animated Bubble Buttons / 背景がアニメーションするボタン
18. Using CSS3 Transitions / transitionの分かりやすいデモ集
19. CSS drop-shadows / cssで作る効果的なドロップシャドウ
20. CSS3 3d bar chart / アニメーションするバーチャート
21. :toggle / css3でtoggle処理
22. Animated CSS3 helix / 螺旋状にアニメーションしながら反転
23. 100% CSS3 Lightbox / CSS3のみでLightboxを実現
24. Pure CSS3 Page Flip Effect / ページめくりエフェクト

ネタ的なサンプル

実用的かどうかはさておき、ワクワクするようなユニークなサンプル

1. Multiple 3D Cubes / 動くハコにテキスト
2. Opera logo / Operaのロゴをcssのみで
3. CSS3- Social media icons / 画像無しでソーシャルメディアアイコン
4. Pure CSS Icons / cssのみでアイコンいろいろ
5. Ipod with CSS3 / cssでipodを再現
6. Internet Explorer® Pure CSS / Safariでのみ上手く表示されるIEアイコン
7. Curtis CSS Typeface / cssで書かれた文字
8. CSS3 checkbox / jsも画像も一切使用せず
9. CSS3 Sideways Google / 傾いたGoogle
10. CSS3 Ads Versus Flash Ads / Flash広告と同様の動きをcss3で再現
11. Andrew Hoyer / 歩く人をcss3アニメーションで実現。凄い
12. wonder webkit / transformationを利用したユニークなサンプル
13. Ajax Style Loading Animation / Ajaxのローディングを画像を使わずでcssで再現
14. AT-AT Walker / 画像をアニメーションさせるサンプル
15. CSS3 ドラえもん / css3でドラえもんを実現
16. iPhone CSS3 / css3でiPhoneの外観を再現
17. Peculiar / cssで実装されたアイコン集
18. 画像を使わずにCSS3でパンダを描いてみた / ブサかわいいｗ
19. Super Mario Icon / 回転するマリオ
20. アンパンマン / マウスオーバーで新しい顔を投げる
21. Pure CSS Twitter ‘Fail Whale’ / クジラかわいい

Webツール

実際にcss3に触れて学べます

1. CSS3プロパティジェネレーター / 貴重な国内のジェネレーター
2. MOTHER EFFING TEXT-SHADOW / text-shadowで3Ｄテキストを作る
3. CSS3 Please! / ブラウザで体感し、インタラクティブに学習
4. CSS3 Playground / 角丸やシャドウ、回転などをその場で実装
5. CSS Border Radius / ブロック要素の角丸を生成
6. CSS3.0 Maker / インタラクティブ生成。見やすいです
7. CSS Corners / グラデ、角丸を生成
8. @FONT-FACE GENERATOR / Webfontを生成
9. CSS3 Gradient Generator / グラデーションを生成します
10. CSS3 Sandbox / シャドウ、グラデ、変形などをインタラクティブ生成
11. Button Maker / css3のボタンを生成。ツールごとDLも出来ます
12. CSS3 Generator / 様々なプロパティに対応したオンラインジェネレーター
13. border-image-generator / ボーダーイメージを生成
14. multi-colonnes en CSS3 / column-countプロパティを生成
15. We Love Buttons / class名を変えるだけでデザインを変更出来る着せ替えcss
16. CSS3 Generator / Life is beautifulさん作

日本語のチュートリアル / Tips

チュートリアル / Tipsは一応日本語のみにしておきました

1. IEでCSS3の効果を出せる。クロスブラウザ対応 CSSスニペット / No jsで
2. もう画像は要らない！CSS3で作る申し込みボタン / IEにも配慮
3. box-shadowを極めて「Mac風UI」を作る！
4. 地獄のミサワがCSS3の勉強に最適と話題に
5. CSS3「ボックスレイアウト」についてまとめてみる
6. CSS3で書いて、スクリーンショットを取って、ボタンにする
7. 今日からCSS3アニメーションを使えるようになるチュートリアル
8. CSS3だけでつくるWebボタン！押さずにはいられないボタン簡単3ステップ
9. HTML5/CSS3で作るスマートフォンサイトの基本
10. jQuery.transitionAnimate.js / スマホ向けjQuery。読めばスゴさが判るはず
11. css3_setwithprefix / Dw用のプレフィックス挿入支援
12. デザインに使える21のCSSトリック / css3を使った効果的なエフェクト
13. CSS3『メディアクエリ』を使ってiPhone、iPadでの表示にもばっちり対応させる
14. CSS-EBLOG / CSS-EBLOGさんのcss3カテゴリです
15. CSS Lecture / CSS Lectureさんのcss3カテゴリです
16. CSS3大接近 / gihyo.jpの特集
17. 実例から学ぶCSS3の効果的な使い方
18. CSS3の効果的な使い方と陥りやすいワナ
19. リッチっぽいiPhone向けサイトを作るためのCSS3アニメーション

IEに対応させるライブラリ

IEにも対応させたいなら外せないですね。決定打はまだ無い印象です・・

1. Selectivizr / 擬似クラスをIEでも使えるようにする
2. cssSandpaper / transformやbox-shadowをIEにも対応させる。独自セレクタ使用
3. CSS3 PIE / 角丸やボックスシャドウをIEで使用可能にするビヘイビア
4. uuAltCSS.js / IEにいろいろ対応させられる。position:fixedなども
5. IE-CSS3 / ドロップシャドウや角丸を対応させるビヘイビア
6. IE7~9.js / いろいろ対応出来る
7. Modernizr / 対応というと語弊がありますが、状況を調べるライブラリです
8. Pina / 1行で角丸をクロスブラウザ対応にするライブラリ
9. Transformie / Transformを対応させるjQueryプラグイン

ギャラリー / インスピレーション / ポータル

多くはないですが。

1. Ars CSS3 Gallery / css3専門ギャラリー
2. CSS3 Design Contest Results / css3のデザインコンテンテスト。DLも可能
3. CSS3 Watch / css3情報をTumblrで収集
4. CSS3.Info / CSS3専門サイト
5. CSS3.com / リファレンス・チュートリアルサイト

役立つまとめ記事 / その他

その他

1. CSS3 Solutions for Internet Explorer / IEに対応させる方法まとめ
2. IEでCSS3の効果を出せる。クロスブラウザ対応 CSSスニペット
3. 70 Must See CSS3 Tips, Tricks And Tutorials / チュートリアルまとめ
4. CSS3 Cookbook / css3の実用的な使い方
5. ここまでできる！CSS3を使ったチュートリアルまとめ
6. 35 Best CSS3 @font-face Kits / @font-faceで使えるフォント集
7. CSS3が日本語の禁則処理、傍点、縦書きなど対応へ、ドラフト公開
8. 31 CSS Code Snippets To Make You A Better Coder / スニペット集。css3も結構有り

もしかしたらあとで何か追加する可能性も。需要があればHTML5やjQueryとの併用サンプルも含めるかもです。