CSS3で作るボタンやバナーの決定版!グラデーションやストライプ、アイコンなどの自動生成可能なGrad3が秀逸すぎる

グラデーションの決定版

先日、ブラウザ上でCSSのグラデーションを直感的に生成できるGrad3が登場しましたね。各種ブラウザ対応、角丸、フォント、ストライプ、アイコン、などなど、このジェネレーターがあれば全て完了しちゃう優秀ぷりですよ。

 

Grad3 CSS3のグラデーションを自動生成

全て直感的に操作できるから楽ちん。

3/24にGrad3としてバージョンアップされましたが、前回のGrad2もなかなかの高機能っぷりでした。

adf000124
CSS3のグラデーションを自動生成 | Grad2 -CSS3 Easy Gradation Editor-

 

サンプルも豊富で、その生成された物を選んでカスタマイズすることも可能でした。作りやすかったですね。

adf000123

先日、利用しようと思ったら上記のような告知が表示されたので!('A')おお っとなりましてさっそく利用することに。

adf000122

インターフェイスはこんな感じ。前回よりもスッキリな印象ですね。

adf000125

グラデーションのサンプルは前作よりも豊富になりました。カラーベースから選択できるは非常に便利かも。('A')

adf000127

もちろん、カラーサンプルで選択したグラデーションをカスタマイズすることも可能です。

adf000128

各種ブラウザにも対応しています。ボタン一つでコードの表示を切り替え!

 

っとここまでは、前回Grad2まであった機能ですね。

角丸、アイコン、ストライプも設定できるようになってる。

っと今回から追加された機能がすごいです。

 

グラデーションタイプを選択できるようになった。

adf000131

これが通常の線のグラデーションですね。下のスイッチを切り替えると

adf000132

ソナーみたいなのが表示されて丸型のグラデーションが表示されます。おお新しいね!('A')

 

ストライプを選択できるようになった。

adf000135

網目上のメニューを選択すると、グラデーションにストライプを追加することができます。

adf000136

色々なバリエーションが用意されているのでサイトにマッチした物を選択することも可能ですね。

 

アイコンも追加できるよ

adf000137

ストライプメニューの上にあるギアのアイコンをクリックすると、バナーにアイコンを追加することができます。上記画像ではダウンロードアイコンを追加してみた感じ。adf000138

カート用のアイコンがあったり

adf000139

電話連絡用のアイコンがあったりと重宝しますね。

 

その他、角丸やフォントサイズなど細かく調整可能

adf000140

角丸はもちろん、フォントなども微調整できるようになっています。

 

以上、機能豊富過ぎてバナー生成する時の決定版としてGrad3を利用してみてはいかがでしょうか。おしまい。('A')