ピクセルファクトリーではHTML5に関する研究をしております。このページでは実験・検証結果や研究の成果などを公開していきます。

今回はCSS3によるグラデーションです。

CSS3のグラデーションは方向と色を指定することでグラデーションを表示することができます。

HTML5コーディングのサンプルページのタイトルの緑背景に使用している上から下へのグラデーションを紹介します。
HTML5コーディング

対応ブラウザ

Safari 4、Chrome 5、Firefox 3.6が対応しています。

記述方法

Safari、Google ChromeとFirefoxで記述が少し異なります。

Safari、Google Chrome用（webkit）の記述

background: -webkit-gradient(linear, left top, left bottom, from(#9ECF46), to(#87B82F));

Firefox用（moz）の記述

background: -moz-linear-gradient(top,#9ECF46, #87B82F);

縦の方向のグラデーションはSafari、Google Chromeでは開始位置と終了位置を「left top, left bottom」と指定し、Firefoxでは「top」と開始位置のみを指定します。

開始位置の色と終了位置の色の指定はSafari、Google Chromeでは「from(#9ECF46), to(#87B82F)」と記述しますが、Firefoxでは「#9ECF46, #87B82F」と記述します。

このように記述方法は異なりますが、2色を指定するだけで簡単に背景色をグラデーションにすることができます。

その他のグラデーション

今回はシンプルな上から下への2色グラデーションを紹介しましたが、CSS3のグラデーションは左右や斜め方向のグラデーションや円形のグラデーションも可能です。また、開始位置と終了位置の2色だけでなく途中の色の指定も可能です。