CSSでグラデーションを表現する

エ・ビスコム・テック・ラボ
2009-03-06 11:57:01
Safari 4（ベータ版）とGoogle Chrome（開発版）が対応したグラディエント（Gradient）の機能を利用すると、CSSで簡単にグラデーションを表現することができる。グラデーションは透過することもできるため、対応ブラウザが増えれば表現の幅が大きくアップするだろう。
最新特集【一覧】

防水スピーカーをワイヤレス化、お風呂でのんびり音楽を楽しむ

自作バーコードで音楽CDを管理する

Perfumeが公開したダンスのモーションデータをChromeで扱う

グラデーションを透過する

　色の指定にrgba()を利用すれば、グラデーションを透過して背景に溶け込むように指定することもできる。rgba()はアルファチャンネルを含めてRGBで色指定を行うものだ。

　たとえば、サンプル01の黄緑色（#66ff00）の指定をrgba()に置き換えて、アルファチャンネルの値を「0.5」と指定すると、黄緑色は50％の半透明の状態で表示される。なお、次のサンプルでは半透明になったことをわかりやすくするため、ページの背景に青い横縞の画像を表示している。

黄緑色を半透明にしたグラデーション 黄緑色を半透明にしたグラデーション 
body{
background: url(back.gif);
}

div{
background: -webkit-gradient(linear, left top, left bottom, from(rgba(102,255,0,0.5)), to(#00aaff));
}
※ブラウザで表示を確認する

　アルファチャンネルの値を「0」にすれば、完全に透明にすることができる。

黄緑色を完全に透明にしたグラデーション 黄緑色を完全に透明にしたグラデーション 
body{
background: url(back.gif);
}

div{
background: -webkit-gradient(linear, left top, left bottom, from(rgba(102,255,0,0)), to(#00aaff));
}
※ブラウザで表示を確認する

　なお、rgba()について詳しくは「アルファチャンネルを使った透明度の設定」を参照してほしい。また、本稿の応用例「グラフィックソフト不要：CSSで画像に透過グラデーションの帯を重ねる」も参考にして頂きたい。

　次回は、-webkit-gradient()を利用して円形グラデーションを表示する方法を紹介する。

  • 新着記事
  • 特集
  • ブログ