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

エ・ビスコム・テック・ラボ
2009-03-06 11:57:01
  • このエントリーをはてなブックマークに追加

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

 色の指定に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()を利用して円形グラデーションを表示する方法を紹介する。

このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]