🌈

GRAGENをリリースしました

公開

2023-10-20

タグ

こんにちは、だいちゃんです。

グラデーションがかかったテキストのCSSをプレビューを見ながら生成することができる GRAGEN -グラジェン- をリリースしました！

GRAGEN

GRAGEN は、無駄に広いプレビュー領域がチャームポイントな、グラデーション付きテキストのCSSを生成することができるツールです。

即時に反映されるプレビューを見ながらグラデーションの色や角度を変更して、Webページに合ったグラデーションを決めることができます。

さらに、プレビュー用のテキストや、背景色も変更することができるので、よりページに近い状態で確認できます。

変更できるパラメーター

さらにさらに、グラデーションの色は自由に無限に増減可能な上、カラーピッカーから視覚的に選ぶ or カラーコードで直接指定することもできます！

最近Webツールを作る楽しさに目覚めてきて、RECITONE や SURL などいくつかのWebツールを公開しています。

ただ、共通してデザインが最弱で、特にページのタイトルがタイトルらしからぬ風格の無さになっていて、安っぽく見えてしまうのが悩みでした。

そこで、CSSでタイトルにグラデーションをつけようと試したのですが、開発者ツールから色を変えたりするのも結構めんどくさかったので、簡単にプレビューしながら色を選べるツールを作ってやろうと思って作ってやりました。

作ってみたのはいいものの、ツールを作ったことに満足して、既存のツールの改修がめんどくさくなってるのが今の悩みです。

今後は、Google Fontの日本語フォントをいくつか読み込んでおいて、フォントも切り替えながらプレビューできるよう、とか、グラデーションの色の部分を並び替えできたりしたら、もう少し便利になるかなと思ってます。

今回作ったヘッダーはほかのツールでも共通して使っていきたいので、その横展開も進めたい。

そして何より、このツールのタイトルすらグラデーション使ってないのどうにかしたいw

忙しい平日の時間を割いて3日くらいでやっつけで作った割にはちゃんと動いてくれて嬉しい反面、コードが相変わらず汚いのでどうにかしたい...