• 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と同じ。
blog comments powered by Disqus

PageTop