このページの本文へ

実験から実践段階へ

Googleも採用!CSS3実践テクニック

2009年11月24日 14時00分更新

菊池 崇/Web Directions East代表

  • この記事をはてなブックマークに追加
本文印刷

つややかなグラデーションをCSS3で表現する

 CSS3では、backgroundプロパティの値に「gradient」を設定することで背景にエレガントなグラデーションを設定できる。gradientを使えば数値を変更するだけでグラデーションを自由に変更できるので、画像編集ツールで画像ファイルを何度も調整するより断然便利だ。

 gradientは、Safari4.0以降とFirefox 3.6以降で利用できるが、記述方法は以下のように異なっている。

【gradientの基本】(Safari4.0以降)


-webkit-gradient(linear, 開始位置, 終了位置, color-stop(色を追加する位置, 追加する色));


【gradientの基本】(Firefox3.6以降)


-moz-linear-gradient(開始位置, 終了位置,from(開始時の色),
                                   color-stop(色を追加する位置, 追加する色),
                                   to(終了時の色));


 開始位置/終了位置は、位置キーワード(top/bottom/left/right/center)または数値(ピクセルなど)で指定する。color-stopはグラデーションの途中に色を追加する引数で、いくつでも追加できる。色を追加する位置は%で指定する。色の指定には、透明度を設定できるrgba()が使える。

 今回のサンプルでは、backgroun-colorプロパティで背景を塗りつぶしておき、その上に段階的に上方向から下方向にかけて10%ずつ濃くしたグラデーションマスクを重ねている。また、マウスオーバー(:hover)時にはgradientの値を変更し、より濃いグラデーションにしている。


■通常時のナビゲーションバー

Safari4.0での実行結果

/*mozilla 3.6+ グラデーション マスク*/
    background-image: -moz-linear-gradient(top, bottom, /*上から下にグラデーション*/
                                   from(rgba(255, 255, 255, .2)), /*透明度 80%*/
                                   color-stop(10%, rgba(255, 255, 255, .3)), /*上から10%に透明度 70%*/
                                   to(rgba(255, 255, 255, .4)));/*透明度 60%*/
/*Safari4.0+ グラデーション マスク*/
    background-image: -webkit-gradient(linear, left top, left bottom,/*上から下にグラデーション*/
                                   color-stop(0, rgba(255, 255, 255, .2)), /*透明度 80%*/
                                   color-stop(50%, rgba(255, 255, 255, .3)),/*透明度70%*/
                                   color-stop(90%, rgba(255, 255, 255, .4)));/*透明度60%*/
}



■マウスオーバー時のナビゲーションバー(:hover)

Safari4.0での実行結果

/*mozilla 3.6+ グラデーション マスク*/
    background-image: -moz-linear-gradient(top, bottom,
                                   from(rgba(255, 255, 255, .1)),
                                   color-stop(10%, rgba(255, 255, 255, .2)),
                                   to(rgba(255, 255, 255, .3)));
/*Safari4.0+ グラデーション マスク*/
    background-image: -webkit-gradient(linear, left top, left bottom,
                                   color-stop(0, rgba(255, 255, 255, .1)),/*透明度 90%*/
                                   color-stop(50%, rgba(255, 255, 255, .2)), /*透明度 80%*/
                                   color-stop(90%, rgba(255, 255, 255, .3)));/*透明度 70%*/
}


Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く