WEBサイトにグラデーションを表示する場合、ほんの数年前まではIllustratorやPhotoshopで画像に書き出して、それを貼り付けるのが普通でした。
ところが最近はCSSのコードで記述するのが主流になってきて、Illustratorにもコードを書き出す機能が実装されました。
しかし、わざわざIllustratorを使わずとも、単純なグラデーションならブラウザ上のジェネレーターで手軽にサクサクッと書き出すことが出来ます。
今回は、簡単に使えるジェネレーター「Blend」のご紹介。
Blend Create and customize beautiful CSS3 gradients.
作成できるグラデーションは、一方の色から一方の色へと変化していく単純なパターンのみです。
複雑に変化するパターンには対応していません。
Blendの使用方法
まず、Blendのサイトを開きます。
中央の「Let’s Blend!」をクリックします。
左下と右下の調整パネルで2つの色を決めます。
また、色番号を直接打ち込むこともできます。
変化する色を見ながら直感的に操作できるので、この手のジェネレーターとしては驚くほど使いやすいです。
右上のパネルでは、「線形」と「円形」の２パターンを切り替えられます。
さらに「線形」のグラデーションでは、角度を調整することも出来ます。
気に入ったパターンが出来たら、右上の「</>」をクリックします。
すると、CSSのコードが表示されるので、
これをコピーして使ってください。
実際に作ってみました
実際に3パターンほど作ってみました。
これ、画像じゃありません。
CSSで書き出してます。
コードはHTMLタグにstyle属性で直接指定しています。
作成に要した時間はほんの数分。
いやあ、便利なものですね＾＾
