ジェネレーターを使うと、三角の方向、横幅・高さ・カラーを入れるだけで、デザイン通りの三角形CSSを作成してくれます。

↑↑こんなふうに、テキスト横に三角形がつくデザインの時など、三角の部分を画像を使わずCSSでサクッと作ることができたら良いですよね。

吹き出しの三角の部分をデザイン通り記述するのに、私は時間がかかってしまいます・・・

そんな時便利なのが、吹き出しデザインを作成してくれるCSSジェネレーター。

ボックスの大きさやカラー、角丸、三角の位置や大きさを入れると、作りたいデザインの吹き出しのCSSを作成してくれます。

これは、1行の記述で、レスポンシブ対応してくれるフォントサイズが指定できます。

デザインMax幅とMin幅の画面サイズと、その時に表示したいフォントサイズを入れると、半端な画面幅の時も自動的にフォントサイズを計算して表示してくれます。

どの画面幅でも最適なフォントサイズになるので、とても便利だなと思います。

デザインデータからボックスシャドウの値を決めることがほとんどなので、こちらのジェネレーターの出番は今のところないのですが、コーディング中にシャドウをつける必要が出た時、パッとイメージしやすいので、使えると思い準備しています。

どのくらいシャドウをつけるか迷った時に、数値を入れながらイメージできるのがとても便利ですね。

ストライプの背景デザインの時に、役立ちそうなこちらのCSSジェネレーター。

画像を使用せずCSSで表現できれば、サイト軽量化になりますし、色変更の際も簡単にできます。

画像を切り抜くことができるCSS。

HPに載せる画像の形を変えるようなデザイン変更がある時に、役立ちそうなこちらのジェネレーター。

画像データを修正することなくCSSだけで切り抜くことができます。