こんにちは。
またほとんど自分用ですがCSS3生成してくれるジェネレーターを整理したくてまとめました。
うった方がいいのは分かりつつ、やっぱり頼っちゃいますよね…。
グラデーション
Ultimate CSS Gradient Generator
サイトへ
以前からこちらを使用させていただいています。
使い勝手のいいサンプルが揃っています。
CSS Gradient Generator
サイトへ
操作性がだいぶシンプルで使いやすいです。
CSS Sample
サイトへ
グラデーションだけでなくボーダーやチェックなども用意してあります。
CSS3だけでここまで表現できるんですね。
Gradient Generator
サイトへ
こちらもシンプルで使いやすいです。保存機能があるのがいいです。
ボタン
Grad3
サイトへ
各ブラウザ用のcssを右上のアイコンでいるか/いらないかなど選択できます。
また、アイコンも用意されているのが特長的です。
CSS3 Button Generator
サイトへ
段階を踏んでボタンの調整をできるのがわかりやすいです。
CSS3 GENERATOR
サイトへ
操作性がシンプルです。
『GET THE CODE!』を押すと各ブラウザ用のcssがいるか/いらないか選択できます。
Css Gradient Button
サイトへ
hover時のボタンも一緒に用意/プレビューできるのが特長的です。
CSS Button Generator
サイトへ
カーソルを当てないとどの部分のカラーなのか分からないのがちょっと難点なのですが…。
htmlからcssのクラスまできちんと用意してくれるのがいいですね。
CSS Button Generator
サイトへ
こちらもhover時の表示を合わせて用意することができます。
その他装飾
CSS3 Text Shadow Generator
サイトへ
テキストシャドウ用のジェネレーターです。
やっぱりプレビューがあるといいですよね。
box-shadowジェネレーター
サイトへ
ボックスシャドウ用のジェネレーターです。
こちらもプレビューがありがたいです。
CSS triangle generator
サイトへ
三角形用のジェネレーターです。
三角ができる時の動きがちょっと気持ちいいです。
CSS ARROW PLEASE!
サイトへ
吹き出しを作成してくれるジェネレーターです。
こんな複雑そうなものを一瞬で作成してくれるのは本当うれしいですね…。
CSS3 Generator
サイトへ
角丸からFlexboxまで計12種類のcssを用意してくれます。すごい。
グラデーションはUltimate CSS Gradient Generatorにリンクがつながっています。
CSS3.0 Maker
サイトへ
こちらも計10種類のcssを用意してくれます。
CSS3 Generator
サイトへ
主に生成部ではhover時のアニメーションを使いそうです。
立体描写を確認しやすくするため3Dモードが用意されたり、こだわりがすごいです。
cubic-bezier.com
サイトへ
アニメーションの速度などの指定ができます。
『GO!』をクリックすると実際の動きの確認・比較ができます。
以上です。それでは。