IEも対応！CSS3で画像を使わずにグラデーションをかける方法

01 . ブラウザの種類

CSS3のグラデーション機能は各ブラウザ共通ではなく個別の対応が必要になりますので主要ブラウザの種類を確認しておきます。

mozilla系：Firefox
Webkit系：Chrome、Safari
IE系：Internet Explorer

この他にもブラウザの種類はいろいろありますが主要ということで以上３つとしました。実際当ブログへのアクセスもこの３つが大多数を占めています。

02 . mozilla系（Firefox）への対応

要素のbackgroundに「-moz-linear-gradient」を指定します。パラメータは開始位置、開始の色、終了の色となります。

	background: -moz-linear-gradient(top, #FFFFFF, #FFF4EA);

開始位置がtopの場合は上から下方向へグラデーションがかかります。横方向にするにはleftとします（bottom,rightも可）。ですのでこの場合は要素の上から#FFFFFFから #FFF4EAに向けてのグラデーションとなります。

「-moz-linear-gradient」は途中に色を追加することができます。パラメータは開始位置、開始の色、途中の色と位置（％）、終了の色となります。

	background: -moz-linear-gradient(top, #FFFFFF, #AAAAAA 50%, #FFF4EA);

03 . Webkit系（Chrome、Safari）への対応

要素のbackgroundに「-webkit-gradient」を指定します。パラメータはlinear、開始位置、終了位置、from(開始の色)、to(終了の色)となります。

	background: -webkit-gradient(linear, center top, center bottom, from(#FFFFFF), to(#FFF4EA));

開始位置は「center top」という風に指定します。終了位置は「center bottom」という風に指定します。（left top , right top , left bottom , right bottomも指定可）

横方向のグラデーションにしたい場合は開始位置「left center」終了位置「right center」とすればOKです。

「-webkit-gradient」も途中に色を追加することができます。パラメータはlinear、開始位置、終了位置、from(開始の色)、 color-stop(途中の位置（％）, 途中の色)、to(終了の色)となります。

	background: -webkit-gradient(linear, center top, center bottom, from(#FFFFFF), color-stop(50%, #AAAAAA), to(#FFF4EA));

04 . IE系（Internet Explorer）への対応

IE独自のfilterを用います。IE5.5以上で有効です。引数はGradientType、startColorstr=’開始の色’、endColorstr=’終了の色’となります。

	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FFFFFFFF', endColorstr='#FFFFF4EA');

引数「GradientType」は０：縦方向、１：横方向になります。また色の桁数が多い（通常は#RRGGBB）と思いますが、最初の２つは色の透明度となっています。00（透明）〜FF（不透明）。上の場合ではFF（不透明）＋FFFFFF（白）となっています。

05 . まとめ

それぞれ独自対応となっていますが、統一される日はくるのでしょうか。CSSはこんな感じ↓

sample a:hover{
	background-color: #FFF4EA;
	background: -moz-linear-gradient(top, #FFFFFF, #FFF4EA); /* mozilla */
	background: -webkit-gradient(linear, center top, center bottom, from(#FFFFFF), to(#FFF4EA)); /* Webkit */
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FFFFFFFF', endColorstr='#FFFFF4EA'); /* IE5.5以上 */
}

うまくグラデーションがかからない場合はその要素にwidth、height（幅、高さ）が指定されているか確認してみてください。画像を使わずにCSS3でグラデーションをかける方法でした。