放射状グラデーションを描くradial-gradient

3つのcssグラデーション

CSSグラデーションは大きく分けて、linear(直線状)・radial(放射状)・ conic(円錐)の3種類あります。
(conic-gradientについてはcss4の草案段階ですが、現時点でIEとFirefoxを除く主要ブラウザはすでに対応。)

今回は放射状のグラデーション、background:radial-gradientの基本から細かい設定まで見ていきます。

linear-gradientの基本を理解している前提で進めるので、未習であれば先にlinear-gradientを読んでからの方が良いです。

radial(放射状)のグラデーションを作るcss

linear-gradientと同じく、colorではなくimageタイプのプロパティで、2色以上指定するとブラウザが自動でグラデーションを生成します。

最初に指定した色が中心点。そこから外側に向かう放射グラデーションです。
とりあえず2色サンプルがこちら。

 
div{
  background:radial-gradient( navy, tomato);
}

background:radial-gradientで指定できる値

まずlinear-gradientと同じく、%を使ってグラデーションの幅とグラデーションの中間点の指定ができます。詳しくは「linear-gradientの位置を指定」にて。

linear-gradientにはないradial-gradientの値としては「形状」「スタート地点」「ゴール地点」の3つです

形状

真円グラデーションか楕円グラデーションかの2種類です。
初期値は「ellipse」(楕円)。「circle」を指定すると真円。

 
 
1つめ{
  background:radial-gradient( ellipce, navy, tomato);
}

2つめ{
  background:radial-gradient( circle, navy, tomato);
}

スタート地点

グラデーションの中心点をどこにするかという値です。指定方法はbackground-positionと同じですが、「at ○○」で指定します。
初期値では「at center」 ( = at 50% 50%)。

先ほどの形状(ellipse /circle)に一文字空白をあけて書きます

top

10% 70%

1つめ{
background:radial-gradient(ellipse at top, navy, tomato);
}

2つめ{
background:radial-gradient(circle at 10% 70%, navy, tomato);
}

ゴール地点

キーワードでグラデーションが終わる場所を決めます。

cssで書く順序としては、「形状 ゴール地点 at スタート地点」 です。順が違うとエラーですので注意。

ゴール地点はサンプルを見ながらの方が分かりやすいと思うので順に4つ見ます。中心点は白くしています。

farthest-corner
中心点から最も離れた角がゴールになるようにグラデーションを生成します。(初期値)

 
div{
background:radial-gradient(ellipse farthest-corner at 10% 40%, navy, tomato);
}

farthest-side
中心点から最も離れた辺にゴールが内接するようにグラデーションを生成します。

 
div{
background:radial-gradient(ellipse farthest-side at 10% 40%, navy, tomato);
}

closest-corner
中心点から最も近い角がゴールになるようにグラデーションを生成します。

 
div{
background:radial-gradient(circle closest-corner at 10% 40%, navy, tomato);
}

closest-side
中心点から最も近い辺にゴールが内接するようにグラデーションを生成します。

 
div{
background:radial-gradient(circle closest-side at 10% 40%, navy, tomato);
}

見てきたように、中心(スタート)からゴールが近いとき(= グラデーション半径が狭いとき)、radial-gradientの外側はグラデーションではなくベタ塗りとなります。

radial-gradientの複数配置

background-imageでは、linear-gradientと同じく複数のradial-gradientを指定することが可能です。
background-imageを複数重ねて指定した場合、最初に指定した画像(orグラデーション)が一番上に、後になるほど下に描写されます。

ですので、最初に指定したグラデーションがメインとなり、他のグラデーション指定が控えめに表現されます。

 
div{
 background: 
   radial-gradient(
     circle at 50% 10%,
     rgba(0,0,128,.8),
     rgba(255,100,100,.2)
   ),
   radial-gradient(
     farthest-side at 10% 90%,
     rgba(255,99,71,.9),
     rgba(255,100,100,.1)
   ),
   radial-gradient(
     closest-corner at 80% 80%,
     rgb(10,230,10),
     rgba(255,10,10,.2)
   );
}
タイトルとURLをコピーしました