CSS3を使ってグラデーションを作成

グラデーションの表現もCSS3ならば色や方向、位置を指定するだけで簡単に作成することができます。これならば、今まで画像を用意してそれをCSSで背景画像を指定して表現するよりも時間と手間が省け、ファイルサイズも軽くなりメリットがあります。

線形グラデーションの表現（縦方向）

まずは、linear-gradientというプロパティを使って縦方向のグラデーションを作成してみます。記述の仕方はmozilla系のブラウザとwebkit系のブラウザで少し指定方法が違います。mozilla系の場合は、「-moz-linear-gradient(方向,開始色,中間色 中間色の位置,終了色)」、webkit系の場合は、「-webkit-gradient(linear,開始位置,終了位置,from(開始色),color-stop(中間色の位置,中間色),to(終了色))」のように指定をします。ただし、このベンダープレフィックスをつけた記述方法は古いブラウザに対応する場合に必要となる記述なので、古いブラウザでの対応が不要な場合は、「linear-gradient(開始位置 終了位置, 開始色, 終了色)」といった感じでベンダープレフィックスなしの記述をします。また、中間色の指定はより細かいグラデーションを表現したい場合に指定するものなので、単純なグラデーションならば開始と終了の指定だけで十分です。

.gradient {
  /*古いブラウザ対応が必要な場合はこちらを記述*/
  background: -moz-linear-gradient(top,#ffffff,#8fbc8f 5%,#006400);
  background: -webkit-gradient(linear,left top,left bottom,from(#ffffff),color-stop(0.05,#8fbc8f),to(#006400));
  /*標準ブラウザのみ対応ならばこちらを記述*/
  background: linear-gradient(to bottom, #8fbc8f, #006400);
}

線形グラデーションの表現（横方向）

今度は、横方向にグラデーションをかけてみます。縦方向の場合と同じく、線形なのでlinear-gradientプロパティを使い、開始位置の指定を変えるだけです。左上から右下へグラデーションをかけてみます。

.gradient {
  /*古いブラウザ対応が必要な場合はこちらを記述*/
  background: -moz-linear-gradient(left top,#ffffff,#8fbc8f 5%,#006400);
  background: -webkit-gradient(linear,left top,right bottom,from(#ffffff),color-stop(0.05,#8fbc8f),to(#006400));
  /*標準ブラウザのみ対応ならばこちらを記述*/
  background: linear-gradient(to right, #8fbc8f, #006400);
}

放射状グラデーションの表現

radial-gradientというプロパティを使えば、放射状のグラデーションも表現することができます。

.radial {
  /*古いブラウザ対応が必要な場合はこちらを記述*/
  background: -moz-radial-gradient(circle,#8fbc8f,#006400);
  background: -webkit-gradient(radial,center center,0,center center,50,from(#8fbc8f),to(#006400));
  /*標準ブラウザのみ対応ならばこちらを記述*/
  background: radial-gradient(#8fbc8f, #006400);
}

中間色をいくつか追加すると波紋のようなグラデーションも作ることができます。今回は、中心から外に広がっていくグラデーションの指定をしましたが、開始位置の設定などを細かく指定してあげるといろいろなグラデーションの装飾ができるので試してみてください。

また、サイト上にもグラデーションを作成できるジェネレーターがいくつか存在するので、そういったツールを利用するのも便利です。
Ultimate CSS Gradient Generatorもその1つで、Photoshopなどと同じようにカラーピッカーで色や位置、透明度を設定すると、それに合わせてCSSの指定が生成されるので、それをコピペするだけで利用することができます。