2012年08月27日 category : Web tags : ,

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

このエントリーをはてなブックマークに追加

gradiention

画像を使わずにCSS3のグラデーション機能を使ってマウスオーバーの動作を装飾してみました。

CSS3で実現する画像なしでできるグラデーション機能です。もっと色々なことができそうなCSS3ですがまずはよく使うであろうCSS3のグラデーション機能を使ってサイドメニューを装飾してみました。

画像を用意する必要もなく見出しや装飾に利用できますので用途の幅はとても広く、画像を読み込む必要もないため、サーバへのアクセス回数も減らすことができるというメリットもあります。

当ブログのサイドメニュー:Check New Posts – SNS(ソーシャル・ネットワーク)にマウスカーソルを乗っけてもらうと各サービスに合わせて色が変わるようになっていますので試してみてください。んで、そのまま登録しちゃってください( ̄ー ̄)ニヤリ

01 . ブラウザの種類

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

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

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

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);

firefox

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));

chrome

04 . IE系(Internet Explorer)への対応

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

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

引数「GradientType」は0:縦方向、1:横方向になります。また色の桁数が多い(通常は#RRGGBB)と思いますが、最初の2つは色の透明度となっています。00(透明)〜FF(不透明)。上の場合ではFF(不透明)+FFFFFF(白)となっています。

ie

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でグラデーションをかける方法でした。

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