HTMLとCSSを使ったWEBサイトの実践的な作り方を紹介。

応用53. 円形グラデーションの指定(radial-gradient)

      2017/11/14

radial-gradient(ラジアル グラディエント)

円形グラーデーションは、CSS3でbackground-imageプロパティの新しい値として追加されました。
background-colorプロパティの値ではないので注意してください。
※Internet Explorer 10以上から対応

radial-gradientの各ブラウザの対応状況
Can I use -radial-gradient-

スマホのradial-gradientのサポートはAndroid4以降、iOS9.3以降と、かなり新しいバージョンからの対応になります。
未対応のブラウザでは、円形グラデーションが表示されないので、背景色(background-color)の指定もしておきましょう。
Andoroid4, 4.1, 4.3に対応させる場合は、ベンダープレフィックスの-webkit-が必要です。
各値は、カンマで区切ります。

円形グラーデーション

複数カラーの指定

liner-gradientと同じ、カンマで区切ることによって、カラーを増やすことができます。

複数カラーを指定した円形グラーデーション

各色の開始位置の変更

liner-gradientと同じ、カラーの後に半角スペースで区切り、開始位置を入れます。
開始位置の指定がないカラーは中間の位置から開始します。
指定できる単位は、pxまたは%です。

カラーの開始位置を変更した円形グラーデーション

円形グラデーションの中心位置の変更

円形グラデーションの中心位置は1つ目の値に水平位置と垂直位置を半角スペースで区切って指定します。
各値は下記の通りです。
水平位置は、left、center、right
垂直位置は、top、center、bottom
また、向きの前に at を付ける必要があります。

中心位置を左上にした円形グラーデーション

中心位置を数値で指定することもできます。
数値の場合は、左上が基点になります。
使う単位は、pxまたは%です。

中心位置を数値で指定した円形グラデーション

円形グラーデーションの形状の変更

中心位置の指定の前に半角スペースで区切り、形状を指定します。

  • ellips・・・楕円形(初期値)
  • circle・・・正円

ellipsは、初期値なので省略できます。
circleは、水平、垂直で大きい方の値が直径になります。

形状を変更した円形グラーデーション

まとめ

  • radial-gradientは、CSS3で追加されたbackground-imageの値
  • カンマで区切ることで、複数カラーの指定ができる
  • カラーの後に開始位置の指定ができる
  • 1つ目の値で中心位置を変更することができる
  • 1つ目の値で方向を変更することができる
  • 形状は、正円と楕円形の指定ができる
  • スマホは、比較的新しいバージョンしか対応しない(Andoroid4以上、iOS9.3以上)
  • Android4, 4.1, 4.3に対応させる場合は-webkit-が必要

 - HTML・CSS