今回はradial-gradientについて見ていきます。
同様によく使うlinear-gradientについては別のページで解説しています。併せて確認しておきましょう。
radial-gradientとは?
radial-gradientはグラデーションの種類の一種で、
linear-gradient:線形のグラデーション
radial-gradient:放射線状のグラデーション
repeating-linear-gradient:線形グラデーションの縞々
repeating-radial-gradient:放射線状のグラデーションの縞々
この4種類のグラデーションの種類がCSSで指定ができます。
そして重要なのが、『〇〇-gradient』はimageとして扱われます。
gradientが指定できる
gradientが指定できない
グラデーションなので色関連だからbackground-colorの指定をしてしまいそうですが、『〇〇-gradient』はimageとして扱われます。
対応ブラウザについて
radial-gradientはブラウザによって対応状況が異なるので、ベンダープレフィックスを付けといたほうが無難です。
ベンダープレフィックスについてはこちらをご覧ください。
background: -webkit-radial-gradient(red, blue, green, yellow);
background: -moz-radial-gradient(red, blue, green, yellow);
background: radial-gradient(red, blue, green, yellow);
ベンダープレフィックスから書いて最後に通常の指定方法を書いていきます。
radial-gradientの値
ここからはradial-gradientの実際の指定方法について見ていきます。
background: -webkit-radial-gradient(開始色,終了色);
background: -moz-radial-gradient(開始色,終了色);
background: radial-gradient(開始色, 終了色);
半角スペースではなく、,(カンマ)で区切る。
borderプロパティなどの一括指定プロパティは値を指定する時には、半角スペースで値を区切りますが、gradientの値は,(カンマ)で区切るというのを間違えないようにしましょう。
開始色は円の中心側で、指定する順番が後ろにいくにつれて円の外側の指定になっていきます。例で見てみましょう。
width:300px;
height:300px;
background: -webkit-radial-gradient(#fff,orange);
background: -moz-radial-gradient(#fff,orange);
background: radial-gradient(#fff,orange);
開始色は#fff、終了色はorangeで色の範囲は特に指定していないのでグラデーションになっています。
width:300px;
height:300px;
background: -webkit-radial-gradient(orange 50%,transparent 50%);
background: -moz-radial-gradient(orange 50%,transparent 50%);
background: radial-gradient(orange 50%,transparent 50%);
色の範囲を指定してあげることで、きれいに塗り分けることも可能です。今回は終了色をtransparentにして透明にしたので、orangeの円だけが残っている状態になっています。
円の形状
radial-gradientの初期値では『楕円系が要素の中心』に来ている状態になっています。
さきほどまでの例では縦横300pxでそろえていましたが、今度は縦200pxの横300pxで長方形にしてみるとやはりradial-gradientは楕円になっています。
指定方法は
ellipse:楕円(初期値)
circle:正円
この2通りです。
background: -webkit-radial-gradient(円の種類,開始色,終了色);
background: -moz-radial-gradient(円の種類,開始色,終了色);
background: radial-gradient(円の種類,開始色, 終了色);
円の種類を正円に保ちたい場合は最初に円の種類で『circle』を指定してあげます。
width:300px;
height:200px;
background: -webkit-radial-gradient(circle, orange 50%,lightgreen 50%);
background: -moz-radial-gradient(circle, orange 50%,lightgreen 50%);
background: radial-gradient(circle, orange 50%,lightgreen 50%);
要素のサイズはさきほどと同じ縦200px、横300pxですが円の形は正円になっています。
円の大きさ
『px』や『%』で指定することもできますが、初期値含めたその他の指定方法についても見ていきます。
要素の最も遠いコーナーがグラデーションの終了位置となる（初期値）
要素の最も近いコーナーがグラデーションの終了位置となる
要素の最も遠い辺がグラデーションの終了位置となる
要素の最も近い辺がグラデーションの終了位置となる
順番に見ていきます。
farthest-cornerは円の中心から一番遠い角を円の半径にします。
- 四角は縦横200px
- 三角形は底辺200px、高さ100px
三角形の斜辺の部分が円の半径になります。orange 50%,lightgreen 50%にしているので『半径の半分=斜辺の半分』がちょうどグラデーションの境目になっているのがわかりますね。
closest-cornerは円の中心から一番近い角を円の半径にします。
- 四角は縦横200px
- 三角形は底辺200px、高さ100px
三角形の高さの部分が円の半径になります。orange 100%,lightgreen 100%にしているので『半径=高さ』がちょうどグラデーションの境目になっているのがわかりますね。
farthest-sideは円の中心から一番遠い辺を円の半径にします。
- 四角は縦200px、横300px
- 三角形は底辺200px、高さ150px
三角形の高さの部分が円の半径になります。今回はorange 100%,lightgreen 100%にしているので『半径=高さ』になっていて、要素の縦部分ははみ出してしまっています。
farthest-sideは円の中心から一番近い辺を円の半径にします。
- 四角は縦200px、横300px
- 三角形は底辺300px、高さ100px
三角形の高さの部分が円の半径になります。今回はorange 100%,lightgreen 100%にしているので『半径=高さ』になっています。長方形で要素ギリギリまでにしたい場合は『closest-side』に設定するといいと思います。
円の位置
円の位置は初期値では要素の真ん中ですがこれを動かす場合には円の形状を指定した後に続けて指定します。
background: -webkit-radial-gradient(円の種類 大きさ at 位置,開始色,終了色);
background: -moz-radial-gradient(円の種類 大きさ at 位置,開始色,終了色);
background: radial-gradient(円の種類 大きさ at 位置,開始色, 終了色);
at 位置で指定する方法は以下のようになっています。
- top、bottom、left、right、centerで位置を指定
- 『%』『px』で位置を指定
位置は大きさなどとも関わってくるのでしっかりと確認しながら自分でもいろいろ作りながらどのようになるのか見てみると理解が深まるかと思います。
要素の上下左右端や中心を指定することが出来ます。なお初期値はcenterになっています。
at leftで指定
div {
position:relative;
width:200px;
height:200px;
background:radial-gradient(circle closest-corner at left,orange 100%,lightgreen 100%);
}
span {
position:absolute;
top:0;
left:0;
border-width:100px;
border-color:transparent transparent purple blue;
border-style: solid;
width:0;
height:0;
opacity:0.5;
z-index: 1;
}円の中心が左辺になります。高さについては指定していないのでcenterになっています。
at left bottomで指定
div {
position:relative;
width:200px;
height:200px;
background:radial-gradient(circle at left bottom,orange 50%,lightgreen 50%);
}
span {
position:absolute;
top:0;
left:0;
border-width:100px;
border-color:transparent transparent purple blue;
border-style: solid;
width:0;
height:0;
opacity:0.5;
z-index: 1;
}円の中心が左下隅の角になります。注意しないといけないのは『closest-corner』で円の大きさを指定すると円の中心に来るはずの角(今回なら左下)が最寄の角になる為、半径が0になって円が消えてしまいます。
top、bottom、left、right、centerで位置を指定
- 円を辺に寄せる場合は『circle closest-corner at 方向,色 100%』で「円の直径=辺の長さ」になる
- 四隅に円の中心を持ってくるなら、closest-cornerは外す。(半径0になる為)
簡単にまとめるとこうですね。
続いて円の中心の位置を詳細に設定する方法です。atの後に『〇〇px』『〇〇%』と指定します。開始位置は要素の左上になります。
at 0px 0pxで指定
[HTML]
<div class="box"></div>[CSS]
.box { /*円*/
position:relative;
width:200px;
height:200px;
background:radial-gradient(circle at 0px 0px,orange 50px,lightgreen 50px);
}
.box::before { /*赤の三角*/
position:absolute;
top:0;left:0;border-width:25px;
border-color:transparent transparent red red;
border-style: solid;
width:0;
height:0;
opacity:0.5;
z-index: 1;
}
.box::after { /*青の三角*/
position:absolute;
bottom:0;right:0;
border-width:75px;
border-color:transparent transparent blue blue;
border-style: solid;
width:0;
height:0;
opacity:0.5;
z-index: 1;
}- boxは縦横200px
- 赤の三角は底辺と高さ50pxの直角二等辺三角形
- 青の三角は底辺と高さ150pxの直角二等辺三角形
- 円の半径を50pxに固定
初期位置では左上隅に円の中心が来ています。
at 50px 50pxで指定
[HTML]
<div class="box"></div>[CSS]
.box { /*円*/
position:relative;
width:200px;
height:200px;
background:radial-gradient(circle at 50px 50px,orange 50px,lightgreen 50px);
}
.box::before { /*赤の三角*/
position:absolute;
top:0;left:0;border-width:25px;
border-color:transparent transparent red red;
border-style: solid;
width:0;
height:0;
opacity:0.5;
z-index: 1;
}
.box::after { /*青の三角*/
position:absolute;
bottom:0;right:0;
border-width:75px;
border-color:transparent transparent blue blue;
border-style: solid;
width:0;
height:0;
opacity:0.5;
z-index: 1;
}- boxは縦横200px
- 赤の三角は底辺と高さ50pxの直角二等辺三角形
- 青の三角は底辺と高さ150pxの直角二等辺三角形
- 円の半径を50pxに固定
円の中心を縦横50pxずつずらしています。位置を細かく指定するならば円の大きさも併せて固定したほうが扱いやすいです。%で指定するのは要素の幅などが大きく変わる場合などに使いましょう。
repeating-radial-gradientの書き方
ここまではradial-gradientについて見てきましたが、ここからはrepeating-radial-gradientについて見ていきます。
基本的にはradial-gradientと同じですが、値を指定しないとあまり意味がありません。
値を指定していない場合
width:200px;
height:200px;
background-image:repeating-radial-gradient(orange,gray)gradientには『色の範囲(位置)を指定していない場合は要素範囲を最大限の間隔で均等に割り振る』という性質があるので、値を指定しない場合には繰り返しをせずに1回で終わってしまいます。
値を指定した場合
width:200px;
height:200px;
background-image:repeating-radial-gradient(orange 0%,gray 5%)値を指定すると終了色の直後に最初の色が来るようになります。
終了色と開始色をスムーズにする
値を指定してグラデーションが連続して掛かるようにはなりましたが色の境目がはっきりしてしまっているので、よりグラデーションらしくぼかしてみます。
色の境目がある
width:300px;
height:300px;
background-image:repeating-radial-gradient(orange 0%,gray 5%)
色の境目をぼかす
width:300px;
height:300px;
background-image:repeating-radial-gradient(orange 0%,gray 5%,orange 10%)終了色のあとに開始色を同じ間隔で加えるだけです。
radial-gradientは色の指定だけでなく円の形状や大きさ、位置と指定する項目が多いですが
| radial-gradientで意識するしておくこと | |
|---|---|
| 形状 | ellispe(楕円:初期値)とcircle(正円) |
| 大きさ | farthest-corner(初期値)など4つと『px』や『%』で指定も可 |
| 位置 | 『at』のあとにtopなどでしていするか、『px』や『%』で指定も可 |
ここらへんから使いこなせるようにしておきましょう。また、同様によく使うlinear-gradientについても確認して表現方法を増やしていきましょう。
