【ツール】conic-gradient生成ツール

　どうも！LSSです！！

今回は「コード生成ツール」として「conic-gradient生成ツール」を作ってみました。

conic-gradient生成ツール

繰り返し回数

コード

使い方

上から順に、
「繰り返し回数」のスライダー
「色追加」ボタン
「カラーパレット（最初は２つ）」
「表示サンプル」
「コード」
が並んでいます。

２つあるカラーパレットから色を選択すると、表示サンプルがその色によるグラデーションに変化し、同時にコードもそれに合わせたものに変更されます。

２色だけでは物足りない、という場合は、「色追加」ボタンを押すたびに無制限に色が増えていきます。

また、「繰り返し回数」のスライダーで繰り返し回数を調整できます。

お好みのグラデーションができあがったら、「コード」のグレーの枠に表示されているコードをコピーして、あなたのWebページやブログのHTMLコードとして貼り付ける事で使用できますよ^^

あとがき

最近、JavaScriptを使わずにCSSで作るマイブームにハマっていて、ちょい久々にJavaScriptで書いた気がします。

なんとか作りきれましたねｗ

欲を言えば、色が並ぶのは linear-gradient も radial-gradient も同じなので、gradientの種類も選べるようにしたり、中心位置を調整できるようにしたり…という強化案もありますが、とりあえずはこんなとこで。

ってなとこで、今回はこのへんで！

次回もまた、よろしくお願いします^^