CSS3でグラデーション

今でも画像ファイル使えばいろいろグラデーションが出来るのでしょうが最新のCSS3だとCSSだけでグラデーションがかけられるそうな。明日、ダウンロードが出来るようになるFirefox 3.6とか既にありますがsafari 4.0.x以上で対応しています。

↑設定する前

設定後にサファリでアクセスするとメニューの所のバックグラウンドカラー、グラデーションで青から白になっていると思います。

/*Safari4.0+ グラデーション　マスク*/
background: -webkit-gradient(linear, left top, left bottom, from(#000099), to(#CCCCCC));
/*Firefox3.6+ グラデーション　マスク*/
background: -moz-linear-gradient(top, #000099, #CCCCCC);
メニューの所のCSSにこれを加えております。

★Googleも採用！CSS3実践テクニック（アスキー）
Safari4.0以降では
＞-webkit-gradient(linear, 開始位置, 終了位置, color-stop(色を追加する位置, 追加する色));
なぜかFirefox 3.6以降では同じgradientですがちょっと違います。
＞-moz-linear-gradient(開始位置, 終了位置,from(開始時の色),
＞ color-stop(色を追加する位置, 追加する色),
＞ to(終了時の色));
統一しろや・・・・

とりあえずこれでSafari Ver 4以降やGoogle Chrome、Firefox 3.6以降であればメニューの部分の背景が青から白でグラデーションして見えるはずです。

関連
★CSSでグラデーションを表現する（builder）

Posted by 封神龍（酒） at 2010年01月21日 21:04 | トらックバック | 【所属カテゴリ： Web/Webアプリ】【コメントについて】【トラッくバックについて】【RSS登録について】