• HOME
  • HTML/CSS
  • CSS（スタイルシート）だけでグラデーションを表現する方法のまとめ

CSS（スタイルシート）だけでグラデーションを表現する方法のまとめ

管理人:sofu

タイトルやボタンの背景にグラデーションを施したいとき、グラデーションの画像を用意して、それを背景に敷くと思います。ただ、線形グラデーションのような単純なものなら、画像を使わずスタイルシートだけで表現することができます。一応メモとして載せておきますが、使える方法かどうかは個人の判断に任せます。-webkit-gradientの方法は各サイトで取り上げられているCSS3の注目の方法なので覚えておいても損はないかと思います。

各ブラウザで表現できるCSSグラデーション方法の一覧表

左項目のボックスにグラデーションがかかっていたら、実際に適用されている証拠です。

  IE66/7 IE88 Firefox2/3 Opera9.5 Safari4 Google Chrome2
filterで
グラデーション		 ○ ○ × × × ×
Base64で
グラデーション		 × ○ ○ ○ ○ ○
-webkitで
グラデーション		 × × × × ○ ○

filterでCSSグラデーションを表現

filterとは・・・

画像やテキスト等に対して様々な視覚効果をかけるIE（4.0～）が独自に拡張したものです。

 
filter:progid:DXImageTransform.Microsoft.Gradient(Enabled=1,GradientType=グラデーションの方向,StartColorStr=開始色,EndColorStr=終了色);
 

書き方

Enabled： フィルターの有効、無効を指定。設定値は1(true)で有効、0(false)で無効。デフォルト値は1(true)なので記述は省略してもいいかと。
GradientType： グラデーションの方向。設定値は0で縦方向、1で横向き。デフォルト値は0（縦方向）。
StartColorStr： グラデーション開始時の色と透明度。設定値は8桁表示で#AARRGGBB（透明・赤・緑・青）。デフォルト値は#FF000000。
EndColorStr： グラデーション終了時の色と透明度。指定方法はStartColorStrと同じ。

Base64でCSSグラデーションを表現

Base64とは・・・

バイナリデータをテキストデータに変換（エンコード）する方法のひとつ。電子メールに画像などを添付する際に使われている方式です。

 
background-image: url("data:画像形式;base64,変換データ");
 

書き方

画像形式： image/gif（GIF画像）
image/png（PNG画像）
image/jpeg（JPEG画像）のいずれかを設定
変換データ： Base64変換ソフトなどを使って画像をエンコードしたデータを記述。

-webkit-gradientでCSSグラデーションを表現

-webkit-gradientとは・・・

グラデーションを簡単に表現することができるCSS3の一つ。今のところWebKitベースのSafari4とGoogle Chrome2に対応しています。

 
    background: -webkit-gradient(linear, 開始位置, 終了位置, from(開始色), color-stop(追加位置, 追加色), to(終了色));
 

書き方

開始/終了位置： キーワード（left/right/top/bottom/center）、数値（ピクセルなど）、割合（%）で指定。開始位置を「right bottom」、終了位置を「left top」で右下から左上へのグラデーションができる。
from： グラデーションの開始色を指定。設定値は#000000やカラーネーム。透明度も設定したい時はrgba()を。
color-stop： 追加位置は割合（%）または数値（0～1.0）で指定。中央に追加したい場合は50%（0.5）にする。
追加色はfromと同じ指定方法。
to： 指定方法はfromと同じ。
date 2010.10.26
blog comments powered by Disqus

PageTop