• かちびと.net

    CSS3 関連情報・総まとめ。かなり情報が溜まったので一旦整理したいと思ってまとめてみました。かなり端折りましたが、まだ増えるかもです。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

CSS3 関連情報・総まとめ

スポンサーリンク

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でパンダを描いてみた / ブサかわいいw
  19. Super Mario Icon / 回転するマリオ
  20. アンパンマン / マウスオーバーで新しい顔を投げる
  21. Pure CSS Twitter ‘Fail Whale’ / クジラかわいい

Webツール

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

  1. CSS3プロパティジェネレーター / 貴重な国内のジェネレーター
  2. MOTHER EFFING TEXT-SHADOW / text-shadowで3Dテキストを作る
  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との併用サンプルも含めるかもです。

URL :
TRB :

Ads

Posts

Contact

Services