CSS入門 | CSS3モジュール | CSS3線形グラデーション

Tags:

CSS3線形グラデーション

グラデーション(gradient)とは、2つ以上の色の間で色の表現をなめらかに変化させる効果を意味する。CSS3以前は、グラデーション効果を表現するために複数の画像ファイルを別途用意する必要があった。しかしCSS3では、Webブラウザーが簡単にグラデーション効果を表示できる。

CSS3で提供されるグラデーションには、次の2種類がある。

  1. 線形グラデーション(linear gradients)
  2. 円形グラデーション(radial gradients)

CSS3グラデーション(gradient)の対応バージョン

CSS3グラデーション(gradient)に対応している主要Webブラウザーのバージョンは次のとおりである。また、ブラウザー別にベンダープレフィックス(vendor prefix)を使ってこの機能に最初に対応したバージョンも併記している。

プロパティ ie chrome firefox safari opera
linear-gradient / repeating-linear-gradient 10.0 26.0 /10.0 -webkit- 16.0 / 3.6 -moz- 6.1 / 5.1 -webkit- 12.1 / 11.1 -o-
radial-gradient / repeating-radial-gradient 10.0 26.0 / 10.0 -webkit- 16.0 / 3.6 -moz- 6.1 / 5.1 -webkit- 12.1 / 11.6 -o-

線形グラデーション(linear gradient)

線形グラデーション(linear gradient)は、適用されたHTML要素に対して、直線方向にグラデーション(gradient)効果を適用する。線形グラデーションを作成するには、少なくとも2つ以上の色指定点が必要である。

線形グラデーション(linear gradient)の構文は次のとおりである。

構文

background: linear-gradient(進行方向, 色指定点1, 色指定点2, ...);

色指定点には、グラデーション効果によってその間の色表現をなめらかに変化させたい色を指定する。最初に定義された色指定点が開始点になり、その後は最後の指定点まで順番にグラデーション効果が適用される。

<style>
    #grad {
        background: red;
        background: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, purple);
        background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, purple);
        background: -o-linear-gradient(left, red, orange, yellow, green, blue, indigo, purple);
        background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, purple);
    }
</style>

上の例で最初に出てくるbackgroundプロパティは、linear-gradientプロパティに対応していないすべてのブラウザー向けのものである。最後に出てくるbackgroundプロパティは、CSS標準構文で書かれたコードである。このCSS標準構文のコードは、ベンダープレフィックス(vendor prefix)で書かれたコードがすべて出た後に記述しなければ、ベンダープレフィックス付きのコードが正常に動作しない場合がある。

線形グラデーションの進行方向の設定

CSSを使うと、線形グラデーション効果が進行する方向を設定できる。

グラデーションの進行方向はtop、right、bottom、leftだけでなく、斜め方向にも設定できる。線形グラデーション(linear gradient)効果の既定の進行方向は、上から下である。

次の例は、上から下へ進行する線形グラデーションの例である。

<style>
    #grad {
        background: green;
        background: -webkit-linear-gradient(green, yellow);
        background: -moz-linear-gradient(green, yellow);
        background: -o-linear-gradient(green, yellow);
        background: linear-gradient(green, yellow);
    }
</style>

次の例は、右から左へ進行する線形グラデーションの例である。

<style>
    #grad {
        background: green;
        background: -webkit-linear-gradient(right, green, yellow);
        background: -moz-linear-gradient(right, green, yellow);
        background: -o-linear-gradient(right, green, yellow);
        background: linear-gradient(to left, green, yellow);
    }
</style>

次の例は、左下から右上へ進行する線形グラデーションの例である。

<style>
    #grad {
        background: green;
        background: -webkit-linear-gradient(left bottom, green, yellow);
        background: -moz-linear-gradient(left bottom, green, yellow);
        background: -o-linear-gradient(left bottom, green, yellow);
        background: linear-gradient(to top right, green, yellow);
    }
</style>

線形グラデーション効果の進行方向は、角度で指定して設定することもできる。

基準角度である0度は、下から上への進行を意味する。角度が正の値の場合は基準角度を中心に時計回りに回転し、負の値の場合は反時計回りに回転する。

次の例は、225度の進行方向を持つ線形グラデーションの例である。

<style>
    #grad {
        background: green;
        background: -webkit-linear-gradient(225deg, green, yellow);
        background: -moz-linear-gradient(225deg, green, yellow);
        background: -o-linear-gradient(225deg, green, yellow);
        background: linear-gradient(225deg, green, yellow);
    }
</style>

上で見た線形グラデーションは、-135度の進行方向を持つ線形グラデーションと同じグラデーション効果を示す。

線形グラデーションの透明度設定

CSS3ではグラデーションの透明度をサポートし、指定した色が徐々に消えていく効果を使用できる。

グラデーションに透明度を追加するには、RGBA色値を使用すればよい。RGBA色値のアルファチャンネル値は、完全に透明な0.0から、まったく透明でない1.0までの値を取る。

次の例は、左から右へ徐々に消えていく線形グラデーションの例である。

<style>
    #grad {
        background: green;
        background: -webkit-linear-gradient(left, rgba(0,255,0,1), rgba(0,255,0,0));
        background: -moz-linear-gradient(left, rgba(0,255,0,1), rgba(0,255,0,0));
        background: -o-linear-gradient(left, rgba(0,255,0,1), rgba(0,255,0,0));
        background: linear-gradient(to right, rgba(0,255,0,1), rgba(0,255,0,0));
    }
</style>

repeating-linear-gradient()メソッド

repeating-linear-gradient()メソッドは、線形グラデーション効果が繰り返し続くように設定する。

次の例は、150度の進行方向を持って繰り返される線形グラデーションの例である。

<style>
    #grad {
        background: green;
        background: -webkit-repeating-linear-gradient(150deg, red, white 10%, blue 20%);
        background: -moz-repeating-linear-gradient(150deg, red, white 10%, blue 20%);
        background: -o-repeating-linear-gradient(150deg, red, white 10%, blue 20%);
        background: repeating-linear-gradient(150deg, red, white 10%, blue 20%);
    }
</style>