WordPressアップデートによるテーマファイル構成の不具合により、現在は仮のテーマで表示しています。
記事など読みづらいところが多々あると思いますがご了承いただけると幸いです。
鋭意修正中です…

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

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

CSS Gradation Generator


「CSS Gradation Generator」を別枠で表示

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

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

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

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

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

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

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

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

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

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です