HTML/CSSCSS3のgradientで指定した背景自体をtransitionでマウスオーバー時にふわっと変えることはできません。そんなわけで、今回はそれに近い効果を得る方法をメモします。※gradientの書き方についてはgradientでグラデーションを指定する方法を参照してみてください。下のボックスのような効果になります。背景の指定を簡単にした方法CSSの指定方法と注意点まずはコードを書いて、それから説明をします。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の色を同系色に合わせるのが面倒だという場合には、下のコードようにグラデーションに白や灰色の無彩色を指定する方法もあります。JavaScriptなどの対応状況を調べたい時に便利なサイトをご紹介しておきます。etc※別窓で開きます。こちらのサイトでは、CSS3対応状況が各ブラウザのバージョンごとにベンダープレフィックスのありなしを含めて簡単にわかるようになっています。英語のサイトですが、英語が苦手な私でも特に困ることはありません。以上、グラデーションのかかった背景をCSSでふわっと変える方法でした。web関係のことなどをしているPC大好き人間です。Aboutweb制作をする人や2か月後の自分のために、技術系のことを中心に覚えたことや思いついたことを書くために始めたブログです。Codery.ページトップ。