CSS3でグラデーションを設定する

WEBページにおいて、タイトル部の背景の装飾としてうっすらとグラデーションを施すことが非常に多いです。Photoshopなどでグラデーションの画像を作成してCSSで背景に設定することが主流ではあります。これからも少なからずその手法が必要ですが、FirefoxやChrome,SafariなどのCSS3に対応したブラウザに対しては、CSS3を使えば、画像を利用しなくても簡単にグラデーションを作成することができます。IE9もCSS3に対応していますが、まだ仕様も定かではない箇所もあるし、下位バージョンのIEの需要もまだ続くと思いますのが、今後必ず使用する場面はでてきますから覚えてしまいます。

記述方法はいたって簡単です。

html部分

<div id="box01">
コンテンツテキストなど
</div>

CSS部分

#box01 {
	background:#F90;
	background:-moz-linear-gradient(top,#F60,#F90);
	background:-webkit-gradient(linear,left top,left bottom,from(#F60),to(#F90));
}

FirefoxとChromeなどで記述方法が大きく異なりますので、注意します。

Firefox向けの記述

background:-moz-linear-gradient(top,#F60,#F90);

top 上を基点
#F60 上の色
#F90 下の色

Chrome,Safariなどのwebkit系向けの記述

background:-webkit-gradient(linear,left top,left bottom,from(#F60),to(#F90));

left top,left bottom 左上から左下に
from(#F60) 上の色
to(#F90) 下の色