CSSのグラデーションと背景画像に関する小ネタ
まずは基本から
CSSでグラデーションを設定する方法ですが、たとえば背景に使いたいときは
background: linear-gradient(#fff, #aaa);
というふうにします。なお、上では省いていますが、実際にはベンダープレフィックスをつける必要があります。とはいっても、もはや最新版のブラウザのみをフォローをするには「-webkit-」をつけるだけとなりましたが。いつの間にかFirefoxやOperaはベンダープレフィックスなしでOKとなりました*1。
上の例だとこのようになります。
これが一番シンプルな例ですね。もちろん複数の中間色やグラデーションの方向を指定することができて、
background: linear-gradient(-45deg, red, orange, yellow, green, blue, indigo, violet);
こうすると背景が斜めの虹色になります。
ちなみにグラデーションには2種類あって、ここで使っている線形グラデーション(linear-gradient)の他にも円形グラデーション(radial-gradient)もあります。
テキストにはそのまま使えない
linear-gradientやradial-gradientはどちらかというと色ではなく画像の扱いに近いようです。なので、そのままテキストやボーダーの色に指定することはできません。少々凝ったことをする必要があります。そのテクニックを披露されているブログをご紹介。
CSSのみでテキストにグラデーションやリフレクトをかけるテクニック（ちょっと更新） - くらげだらけ
色が変わるポイントを絶対数値で指定ができる
サンプルを見ると%指定がほとんどなので「できないんじゃないかな」と思いがちですが、ピクセルやcmでの指定ができます。たとえば100pxくらいまではそのままで、そこから50pxくらいでしゅっとかわってほしいなぁ…ってときは
background: linear-gradient(left, #e667af 100px, white 150px);
というふうに書くとできます。
背景画像は複数指定できる
MoziLLaによるの解説はこちら。
CSS での複数の背景の利用方法 - CSS | MDN
CSS3からの仕様で、
background: 手前の画像, 2番目に手前の画像, 3番目に手前の画像, ..., いちばん奥の画像;
という風に複数の背景を重ねて指定することができるのです。これ何が嬉しいかというと、背景のためにグラデーションしたりフィルターをかけたりした画像をわざわざ用意する必要がないという点です。
↓赤くしてみる
background: linear-gradient(rgba(250,0,0,0.6), rgba(250,0,0,0.6)), url('http://farm9.staticflickr.com/8074/8330695899_fb9e4fe85b.jpg');
↓グラデーションかけてみる
background: linear-gradient(top, rgba(0,0,0,0), #fff), url('http://farm9.staticflickr.com/8074/8330695899_fb9e4fe85b.jpg');
