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

Tags:

CSS3円形グラデーション

CSS3では、グラデーション効果を線形だけでなく円形でも表現できる。

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-

円形グラデーション(radial gradient)

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

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

構文

background: radial-gradient(形 サイズ at 中心点, 色指定点1, 色指定点2, ...);

円形グラデーションは、既定では形がellipse(楕円)、サイズがfarthest-corner、中心座標がcenterに設定される。

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

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

色指定点間の間隔調整

CSSを使うと、円形グラデーションで色指定点間の間隔を調整できる。

次の例は、色指定点間の間隔を異なる値に設定した円形グラデーションの例である。

<style>
    #grad {
        background: red;
        background: -webkit-radial-gradient(red 5%, yellow 20%, orange 50%);
        background: -moz-radial-gradient(red 5%, yellow 20%, orange 50%);
        background: -o-radial-gradient(red 5%, yellow 20%, orange 50%);
        background: radial-gradient(red 5%, yellow 20%, orange 50%);
    }
</style>

円形グラデーションの形の設定

CSSを使うと、円形グラデーションの形を楕円ではなく円に設定することもできる。

次の例は、円形を持つ円形グラデーションの例である。

<style>
    #grad {
        background: red;
        background: -webkit-radial-gradient(circle, red, yellow, orange);
        background: -moz-radial-gradient(circle, red, yellow, orange);
        background: -o-radial-gradient(circle, red, yellow, orange);
        background: radial-gradient(circle, red, yellow, orange);
    }
</style>

円形グラデーションのサイズ設定

CSSを使うと、円形グラデーションのサイズを設定できる。このとき、サイズを表すために使用できるパラメーターは次のとおりである。

  • closest-side : 円形グラデーションのサイズが最も近い辺に届く大きさに設定される。
  • farthest-side : 円形グラデーションのサイズが最も遠い辺に届く大きさに設定される。したがって、近い辺ではグラデーションの一部が画面を越える。
  • closest-corner : 円形グラデーションのサイズが最も近い角に届く大きさに設定される。
  • farthest-corner : 円形グラデーションのサイズが最も遠い角に届く大きさに設定される。このサイズが既定値であり、近い角ではグラデーションの一部が画面を越える。

次の例は、さまざまなサイズに調整した円形グラデーションの例である。

<style>
    #grad_01 { background: radial-gradient(closest-side at 35% 35%, red, yellow, orange); }
    #grad_02 { background: radial-gradient(farthest-side at 35% 35%, red, yellow, orange); }
    #grad_03 { background: radial-gradient(closest-corner at 35% 35%, red, yellow, orange); }
    #grad_04 { background: radial-gradient(farthest-corner at 35% 35%, red, yellow, orange); }
</style>

repeating-radial-gradient()メソッド

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

次の例は、繰り返される円形グラデーションの例である。

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