スタイルシートマニア

CSS3でグラデーション背景 | ホームページカスタマイズ Tips

やたらとグラデーションの背景が皆さん気になるようで!
っということで、今回はCSS3でグラデーションを作るときに大変便利なツールをご紹介!
まあ、かなりの前からあるやつなんですけど(^^;

Ultimate CSS Gradient Generator

Photoshopが扱えればだいたい大丈夫だとは思いますが
Ultimate CSS Gradient Generator   ColorZilla.com グラデーション設定
上記画像のグラデーションにある上二つの黒い■が不透明度の設定です。
これは、グラデーション上部の端をクリックすればいくつでも増やせませす。
これらの■をクリックすると下にある、「Stops」っというところのOpacity:・Location: っというのがアクティブになって設定が可能になります。
Opacityで不透明度の調整・Locationで不透明度の位置を調整できます。それと、deleteでその不透明度設定を削除できます。
更に、この■をドラッグ&ドロップで端から外すと不透明度の設定を一つ消せます。(これは三つないと削除できないです)
そして、上記画像のグラデーション下部の黒い■をクリックすると「Stops」っというところのColor:・Location:がアクティブになって設定が可能になります。
Colorでグラデーションの色を設定・Locationでグラデーション位置を調整できます。
これらを駆使してグラデーションの設定を作ります。
不透明度設定と同じく「Stops」の中の「delete」とドラッグ&ドロップでグラデーション設定を削除できます。

Adjustmentsの中の「hue/saturation」(要は色相/彩度)は読んで字のごとく色相と彩度を調整できます。
まあ、色々とややっこしいので元あるグラデーションのプリセットをこれらで調整して好みの色に変えるというのもありかもしれないですね。
ちなみに「reverse」で反転できます。

後は「Preview」の中の「Orientation」でグラデーションの方向を設定して終わりです。
そして、「CSS」の中のCSSをコピーして制作中のCSSにペーストでグラデーション完成です。
まあ、こんなややっこしい行程をやるよりか、プリセットの中からポチッと選んでパパっとコピペした方が早いですね。

ただこれは、CSS3の技術を使っていてIEではIE9がぎりぎり対応できるだけで、全てのブラウザで同じように見えるわけではないので、そのあたりを承知の上で使いましょう!
もし、他のIEにも使えるようにしたいと言うことであればCSS PIEを使うなど色々と対策を考えないといけないです。
そのお話はまた今度!

Author:庄野英朗
Comments:0

庄野英朗

Source Marine 代表
デザイン・コーディング・PHPアプリケーションまでこなす。
マルチデザインプログラマ。

コメントを残す