こんにちは。
またほとんど自分用ですがCSS3生成してくれるジェネレーターを整理したくてまとめました。
うった方がいいのは分かりつつ、やっぱり頼っちゃいますよね…。
グラデーション
Ultimate CSS Gradient Generator
![1Ultimate-CSS-Gradient-Generator---ColorZilla](https://blog.8bit.co.jp/wp-content/uploads/2015/05/1Ultimate-CSS-Gradient-Generator-ColorZilla.jpg)
サイトへ
以前からこちらを使用させていただいています。
使い勝手のいいサンプルが揃っています。
CSS Gradient Generator
![2CSS-Gradient-Generator---CSS3-Factory](https://blog.8bit.co.jp/wp-content/uploads/2015/05/2CSS-Gradient-Generator-CSS3-Factory.jpg)
サイトへ
操作性がだいぶシンプルで使いやすいです。
CSS Sample
![3CSS3-Sample---HORIHAVALABO](https://blog.8bit.co.jp/wp-content/uploads/2015/05/3CSS3-Sample-HORIHAVALABO.jpg)
サイトへ
グラデーションだけでなくボーダーやチェックなども用意してあります。
CSS3だけでここまで表現できるんですね。
Gradient Generator
![4Gradient-Generator---The-Only-CSS-Gradient-Tool-You-ll-Ever-Need](https://blog.8bit.co.jp/wp-content/uploads/2015/05/4Gradient-Generator-The-Only-CSS-Gradient-Tool-You-ll-Ever-Need.jpg)
サイトへ
こちらもシンプルで使いやすいです。保存機能があるのがいいです。
ボタン
Grad3
![5Grad3](https://blog.8bit.co.jp/wp-content/uploads/2015/05/5Grad3.jpg)
サイトへ
各ブラウザ用のcssを右上のアイコンでいるか/いらないかなど選択できます。
また、アイコンも用意されているのが特長的です。
CSS3 Button Generator
![6CSS3-Button-Generator](https://blog.8bit.co.jp/wp-content/uploads/2015/05/6CSS3-Button-Generator.jpg)
サイトへ
段階を踏んでボタンの調整をできるのがわかりやすいです。
CSS3 GENERATOR
![7CSS3-Generator---By-Peter-Funk---Eric-Hoffman](https://blog.8bit.co.jp/wp-content/uploads/2015/05/7CSS3-Generator-By-Peter-Funk-Eric-Hoffman.jpg)
サイトへ
操作性がシンプルです。
『GET THE CODE!』を押すと各ブラウザ用のcssがいるか/いらないか選択できます。
Css Gradient Button
![8Css-Gradient-Button---create-css-button](https://blog.8bit.co.jp/wp-content/uploads/2015/05/8Css-Gradient-Button-create-css-button.jpg)
サイトへ
hover時のボタンも一緒に用意/プレビューできるのが特長的です。
CSS Button Generator
![9CSS-Button-Generator---imageless-css-buttons-maker](https://blog.8bit.co.jp/wp-content/uploads/2015/05/9CSS-Button-Generator-imageless-css-buttons-maker.jpg)
サイトへ
カーソルを当てないとどの部分のカラーなのか分からないのがちょっと難点なのですが…。
htmlからcssのクラスまできちんと用意してくれるのがいいですね。
CSS Button Generator
![10CSS-Button-Generator](https://blog.8bit.co.jp/wp-content/uploads/2015/05/10CSS-Button-Generator.jpg)
サイトへ
こちらもhover時の表示を合わせて用意することができます。
その他装飾
CSS3 Text Shadow Generator
![11CSS3-Text-Shadow-Generator---CSS3gen](https://blog.8bit.co.jp/wp-content/uploads/2015/05/11CSS3-Text-Shadow-Generator-CSS3gen.jpg)
サイトへ
テキストシャドウ用のジェネレーターです。
やっぱりプレビューがあるといいですよね。
box-shadowジェネレーター
![12CSS3-box-shadowジェネレーター](https://blog.8bit.co.jp/wp-content/uploads/2015/05/12CSS3-box-shadowジェネレーター.jpg)
サイトへ
ボックスシャドウ用のジェネレーターです。
こちらもプレビューがありがたいです。
CSS triangle generator
![13CSS-triangle-generator](https://blog.8bit.co.jp/wp-content/uploads/2015/05/13CSS-triangle-generator.jpg)
サイトへ
三角形用のジェネレーターです。
三角ができる時の動きがちょっと気持ちいいです。
CSS ARROW PLEASE!
![17cssarrowplease](https://blog.8bit.co.jp/wp-content/uploads/2015/05/17cssarrowplease.jpg)
サイトへ
吹き出しを作成してくれるジェネレーターです。
こんな複雑そうなものを一瞬で作成してくれるのは本当うれしいですね…。
CSS3 Generator
![14CSS3-Generator](https://blog.8bit.co.jp/wp-content/uploads/2015/05/14CSS3-Generator.jpg)
サイトへ
角丸からFlexboxまで計12種類のcssを用意してくれます。すごい。
グラデーションはUltimate CSS Gradient Generatorにリンクがつながっています。
CSS3.0 Maker
![15CSS3.0-Maker---CSS3.0-Generator---CSS-3](https://blog.8bit.co.jp/wp-content/uploads/2015/05/15CSS3.0-Maker-CSS3.0-Generator-CSS-3.jpg)
サイトへ
こちらも計10種類のcssを用意してくれます。
CSS3 Generator
![16CSS3-Generator-| CSS3を生成するGenerator(ジェネレーター)です。](https://blog.8bit.co.jp/wp-content/uploads/2015/05/16CSS3-Generator-| CSS3を生成するGenerator(ジェネレーター)です。.jpg)
サイトへ
主に生成部ではhover時のアニメーションを使いそうです。
立体描写を確認しやすくするため3Dモードが用意されたり、こだわりがすごいです。
cubic-bezier.com
![18cubic-bezier](https://blog.8bit.co.jp/wp-content/uploads/2015/05/18cubic-bezier.jpg)
サイトへ
アニメーションの速度などの指定ができます。
『GO!』をクリックすると実際の動きの確認・比較ができます。
以上です。それでは。