いままで、WEBページでグラデーションを表現したいときは、グラデーションの画像を作って、それをスタイルシートで背景画像に設定して、縦か横に繰り返し表示させるようなことをしていたんですが、画像の読み込みを行う分レスポンスは悪くなるし、スタイルとは別に画像を書き出さなきゃならないといった手間もあります。

しかし、HTML5と並ぶ次世代WEB標準規格であるCSS3から、グラデーションをはじめとした、今まで画像をつくら名ければ表現できなかったスタイルを実装できるようになりました。

ですが、そうは言っても新しい技術を習得するのは大変ですし、各種ブラウザに対応させようと考えるととても労力がかかります。しかし心配は要りません。この『Grad3』ならね。

グラデショーンボタン生成ツール:Grad3
grad3

 使い方は簡単

  • Prefixで適用したいブラウザを選ぶ
  • グラデーションのカラーやパターンを編集する
  • お好みでフォントや角アール、アイコンのスタイルを編集
  • スタイルシートが自動的にセットされるので、それをコピーして、自分のサイトのCSSにペーストする。

ボタンを作るうえで必要な要素はすべて満たしており、ものの数分でボタンを一つ作れてしまうので、大変お勧めです。

 ただし、IE8以前のブラウザだとそもそもレンダリングしてくれない可能性が高いので、使いどころや代替のスタイルは考えておいたほうが良いでしょう。

今回紹介したGrad3や以前に紹介した、簡単・便利なWEB制作ツールをこれからも紹介していきたいと思います。