主要ブラウザに対応した、「画像を使わないWeb2.0風グラデーションスタイル」サンプルページ
IE7,Firefox3.5,Opera10の3ブラウザで動作確認済み。
基本的にDIVでブロックに分け、z-indexを使って重ねています。
サイトの色合いを変更したいときなど、画像の作り直しは大変面倒です。また、大きい画像はサイズも重くなります。
画像を使わずにCSSで表現できれば色やサイズの変更が簡単なのに、と思って考えてみました。
塗りつぶしと半透明
"上下のブロック"の上に"テキストブロック"を重ねた
上半分だけ背景透過させ、グラデーションぽく見せています。
IEのアルファチャンネルと違い、Firefoxのopacityは文字まで半透明にしてしまうため、文字を入れるブロックを別のDIVにして、文字の透過を防いでみました。
参考URL:
アルファチャンネルとopacityの違い：FirefoxとSafariのCSS対応
http://builder.japan.zdnet.com/sp/css-firefox-safari/story/0,3800083423,20367886,00.htm
グラデーションとグラデーション
"上下のグラデーションブロック"の上に"テキストブロック"を重ねた。
グラデーションももちろんCSSのみで生成。
下記のサイトを使用させていただきました。
参考URL:
Gradient CSS Generator
http://cyokodog.web.fc2.com/cyokolab/html/gradient_css_generator.html
以下のサイトも参考になります。
CSSでグラデーションを実現する方法、主要ブラウザ全対応 | エンタープライズ | マイコミジャーナル
http://journal.mycom.co.jp/news/2010/02/17/012/index.html
グラデーションとグラデーション part2
上のデザインの透過バージョン。
塗りつぶし、透過、グラデーションなど組み合わせると、いろいろなデザインできるかと思います。