CSS3のgradientを使ってグラデーションを表現する

CSS3のプロパティ「gradient」を使ってグラデーションを表現する方法です。

基本設定

以下のようにCSSで設定することで、背景をグラデーションで表現することができます。

.sample{
	background: -moz-linear-gradient(top, #555555, #000000);
	background: -webkit-gradient(linear, left top, left bottom, from(#555555), to(#000000));
	background-color: #000000;
}

これは、実際にこのブログのフッタ部分、コピーライトが乗っている背景を指定してあるコードです。
Firefox用に「-moz-linear-gradient」、SafariとGoogle Chrome用に「-webkit-gradient」を指定します。また、IEなどCSS3に対応していないブラウザのため、とりあえずはCSS2での指定「background-color」も置いておきます。

「-moz-linear-gradient」では「top」を指定することで上から下へ、#555555から#000000にグラデーションを表示することを表しています。

「-webkit-gradient」では「点」で指定するのですが、「left top」から「left bottom」、つまりは上から下へ、#555555から#000000にグラデーションを表示することを表しています。

カラーを増やす

上の基本では2色でのグラデーションを表現しましたが、色数は増やすことが可能です。

.sample{
	background: -moz-linear-gradient(top, #F76A7B, #DAA78A 30%, #93EB7B 60%, #62BB6B);
	background: -webkit-gradient(linear, left top, left bottom, from(#F76A7B), color-stop(0.3, #DAA78A), color-stop(0.6 #93EB7B), to(#62BB6B));
	background-color: #000000;
}

「-moz-linear-gradient」では初めの色と終わりの色の間に、パーセントとセットで色を追加します。パーセントはグラデーションの範囲を指定しています。

「-webkit-gradient」も同様に、fromとtoの間に「color-stop」を挿入することで色を追加できます。「color-stop」ではグラデーションの範囲はパーセントではなく、割合を0.0～1.0の小数で指定します。

以下に、実際に上のサンプルを適応した200×200のエリアを表示します。

※このサンプルはCSS3対応のブラウザでのみ確認可能です。

私はデザイナーではないので、グラフィックツールを触りながら色味を調整するということを、あまりしたことがありません。
ただ、今回初めてCSS3を使ってグラデーションを実装してみたのですが、自然と値を調整しながらブラウザで確認といった作業を繰り返していました。
もう少しグラデーションの色味をはっきりとさせる、もう少しグラデーション領域を広げる、といったように。

もしかしたら、グラフィックツールを一切使わずに、CSSの調整でデザインする、究極的にはデザインとコーディングの作業が一体化する未来も来るかもしれませんね。