web codery

グラデーションのかかった背景をCSSでふわっと変える方法

category: HTML/CSS

CSS3のgradientで指定した背景自体をtransitionでマウスオーバー時にふわっと変えることはできません。そんなわけで、今回はそれに近い効果を得る方法をメモします。
※gradientの書き方についてはgradientでグラデーションを指定する方法を参照してみてください。 下のボックスのような効果になります。

 

目次

  1. CSSの指定方法と注意点
  2. 背景の指定を簡単にした方法

CSSの指定方法と注意点

まずはコードを書いて、それから説明をします。

/* HTML */
<div id="gradient_box"></div>
/* CSS */
#gradient_box {
  width: 150px;
  height: 100px;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(158, 206, 255, .6)), to(rgba(0, 101, 204, .6)));
  background: linear-gradient(to bottom, rgba(158, 206, 255, .6), rgba(0, 101, 204, .6));
  background-color: rgb(158, 206, 255);
  -webkit-transition: background-color .4s;
  transition: background-color .4s;
}
#gradient_box:hover {
  background-color: rgb(255, 255, 255);
}

backgroundプロパティーにグラデーションを指定した後にbackground-colorで背景色を指定し、ホバー時には背景色を0.4秒で変化させるようにtransitionとhover時の背景色を指定しています。

ポイントは、background-colorが透けて見えるようにグラデーションをrgbaで半透明になるように指定しているところです。また、背景色とグラデーションの色が混ざるような感じになるので同系色を指定しています。

transitionと背景のgradientの指定に-webkit-のベンダープレフィックスを付けているのは、safariとほとんどのスマホブラウザーが現在ベンダープレフィックス付きの指定にしか対応していないためです。また、ベンダープレフィックス付きのgradientの指定方法は通常のものと違うので注意が必要です。

その他の注意点は、background-colorの指定をgradientの後に書くことと、transitionの指定をhoverではなく通常のスタイルに指定することです。transitionを指定する場合、hoverの方に書いてしまうとマウスアウトするときに一瞬で戻ってしまうので、どのプロパティにtransitionを指定する場合にも注意したい点です。

色の指定を簡単にした方法

上のコードようにgradientとbackground-colorの色を同系色に合わせるのが面倒だという場合には、下のコードようにグラデーションに白や灰色の無彩色を指定する方法もあります。

/* CSS */
#gradient_box {
  width: 150px;
  height: 100px;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .5)), to(rgba(160, 160, 160, .5)));
  background: linear-gradient(to bottom, rgba(255, 255, 255, .5), rgba(160, 160, 160, .5));
  background-color: rgb(0, 101, 204);
  -webkit-transition: background-color .4s;
  transition: background-color .4s;
}
#gradient_box:hover {
  background-color: rgb(64, 157, 255);
}

この指定をすると下のボックスようになります

 

最後に、各ブラウザのHTML5, CSS3, JavaScriptなどの対応状況を調べたい時に便利なサイトをご紹介しておきます。

Support tables for HTML5, CSS3, etc
※別窓で開きます。

こちらのサイトでは、CSS3対応状況が各ブラウザのバージョンごとにベンダープレフィックスのありなしを含めて簡単にわかるようになっています。英語のサイトですが、英語が苦手な私でも特に困ることはありません。

以上、グラデーションのかかった背景をCSSでふわっと変える方法でした。

管理人にメッセージを送る





ページトップ