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) 下の色
