CSSのグラデーションプロパティを自動で生成してくれるジェネレーターは多々ありますが
多機能な故に生成までにいろいろと入力に迷ったり、
実行ボタンをクリックしないとCSSが生成されなかったり、
もう少し手軽にサクッとCSSグラデーションプロパティを生成できるものがほしくて
必要最低限の入力で必要最低限のCSSのグラデーションプロパティが生成できる
「CSS Gradation Generator(β版)」を作ってみたので紹介してみます。

CSS Gradation Generator


「CSS Gradation Generator」を別枠で表示

入力項目は「色数」「向き」「開始」「終了」に分かれています。

「色数」はグラデーションで使用する色の数ですが、指定できる色数は2~4色のみになっています。
「向き」はグラデーションの向きで、縦、横、ななめの3種類。
「開始」「終了」の項目でグラデーションの色を指定をします。
(「色数」を3、4にした場合は「開始」と「終了」の間に中間色の入力フォームが追加されます)

入力した値は即座にプレビュー枠と画面全体のグラデーションに反映されます。

入力エリア下にあるCSSプロパティ生成エリアも
入力した値が即座に反映されるようになっており、
右側にあるコピーボタンで表示されているコードをコピーすることができます。

生成したグラデーションに対して、
入力エリア右側にある「アニメーション」のチェックボタンをONにすることで
グラデーションにアニメーションを付けることができます。

アニメーションの設定は「速度」と「比率」を指定できるようになっており、
「速度」は値を小さくするほど早くなります。
「比率」はアニメーションさせるグラデーションを引き延ばす値になります。

ジェネレータ内の数値を指定する箇所については、
入力エリアにカーソルをフォーカスした後は
キーボードの「↑」「↓」キーで数値を増減できるようになっているので
数字を直接入力せずに簡単に値を変えることもできます。

生成されるCSSプロパティはベンダープレフィックスなどもなく、
グラデーションを作成するうえで必要最低限の要素になっています。
※ベンダープレフィックスの追加要望があった場合は対応させていただきます。

現状はまだこのジェネレーターはβ版としているので、
今後も改善や要素の追加などもしていきたいと思っています。

シンプルな形でのCSSグラデーションジェネレーターになっていますが、
サクッとCSSグラデーションを作成する際にぜひ。。。

BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

アニメーション付きCSSグラデーションをサクッと生成できる「CSS Gradation Generator」作ってみました

Hatena Bookmark
Popular Entries
Recent Entries
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books