[18-4] 円形（放射）グラデーションを作ろう (radial-gradient)

今回は、円形（放射状）グラデーションを作ってみましょう。

線形グラデーションは、
[13-3] サイト背景にCSSで線形グラデーションをつけよう (CSS使用)をご覧ください。

使用する CSSプロパティ	background

参考：CSS Image Values and Replaced Content Module Level 3

本日のINDEX

1. 円形グラデーションを指定してみよう
   1. 円形グラデーションの構文
   2. 「開始色」「終了色」の2つが最低限必要
2. 色を途中で変えてみよう（カラーストップについて）
3. 中心点やサイズの指定
4. 古いブラウザ用の「ベンダープレフィックス」

● 2017年10月：サンプルファイルを変更しました。それに伴い本文も編集しました。

● 2015年02月：この記事には ベンダープレフィックス（-webkit- などの接頭辞）を使っていましたが、不要と判断し記事から削除しました。
ただし、オールドブラウザ対策として 「ベンダープレフィックス」付きの古い構文を下部にまとめて残しました。

● 2013年11月：初回投稿時（2011年8月）から、radial-gradient の構文が変更されているため、ページは全面変更しました。

★メモ★
グラデーションを指定するCSSプロパティは「background-image」です。
「background」は「ショートハンドプロパティ」と言われるもので、複数のプロパティの値をまとめて記述することができます。
この記事は、ショートハンドプロパティ background だけで指定する方法で書いています。
background-image や backgroundのショートハンドについては、
●background-image【15-1】background関連のプロパティ（1/4）
●backgroundのショートハンド【15-5】backgroundのショートハンド まとめ
をご覧ください。

円形グラデーションを指定してみよう

サンプルファイルでは、見出し要素 <h3> のアタマに装飾として正円を置き、円形グラデーションで二重丸にしています。
（クリックで別ウィンドウでサンプルが開きます）

サンプルファイルの HTML, CSS ソースコードをブラウザで見るには、
[14-1] ブラウザでソースを表示する を参考にしてください。

#mainContent h3 {
	color:#d9a7c7;
	font-size:1.2em;
	margin:2em 0 0;
	}
#mainContent h3::before {
	content:"";
	display:inline-block;
	vertical-align:text-top;
	width:1.2em;
	height:1.2em;
	margin-right:.1em;
	border-radius:50%;
	background:rgba(217, 167, 199, 0.5); /*for Old*/
	background:-webkit-radial-gradient(circle 1.2em, #d9a7c7 50%, #fff 65%, #fff 75%,#d9a7c7 90%, #fff 100%);
	background:radial-gradient(circle farthest-side, #d9a7c7 50%, #fff 65%, #fff 75%,#d9a7c7 90%, #fff 100%);
	}

内側からピンク（#d9a7c7）、白（#fff）、ピンク（#d9a7c7）で円形グラデーションを指定しています。

円形グラデーションの構文

ボックスの左上が中心で、白から黒の円形グラデーションを作ってみます。

Sample

CSS は下記のようになっています。

background: radial-gradient(circle farthest-side at left top, white, black);

円形グラデーションの構文はこのようになっています。

• 「形　サイズ at 円の中心点」までは「半角スペース」で区切ります。
  その後「,（カンマ）」で区切り、色指定が続きます。
• 形のデフォルトは「ellipse」。略すと「サイズ」に従います。
• サイズのデフォルトは「farthest-corner」というキーワード。
  サイズの指定はこのほか、ピクセル指定でも、％でもOK。その場合は「x方向 半角スペース y方向」で指定。値が1つなら正円（x,yとも同じ値）です。
  （ただし circle（正円）の場合は％での指定はNG）
  キーワードは4つ
  • closest-side（1番近い辺）
  • farthest-side（1番遠い辺）
  • closest-corner（1番近い角）
  • farthest-corner（1番遠い角：デフォルト）
• 中心点のデフォルトは「center」。
  中心点の指定はこのほか left、center、right、top、bottomの組み合わせでも、ピクセル指定、％でもOK。その場合は「x座標 半角スペース y座標」で指定。
• 開始色, 終了色 は最低限必要です。色指定はCSSと同じ。色の切り替えは後述。
  開始色の始まりの位置は「円の中心点」がデフォルト。
  終了色の終わりの位置は「サイズ」がデフォルトです。

「開始色」「終了色」の2つが最低限必要

最低限必要な「開始色」「終了色」だけを指定したサンプルです。
省略された「形　サイズ　at　中心点」は、それぞれデフォルト値になります。

Sample

#sample {
	background:radial-gradient(yellow, cyan);
	}

デフォルト値も全部書いた CSSはコレ。

#sample {
	background:radial-gradient(ellipse farthest-corner at center, yellow 0%, cyan 100%);
	}

色は「ウェブカラーネーム」で指定しています。
色指定については [14-4] 色指定について（16進数、色名、10進数、パーセント）をご覧ください。

中心点だけ変更します。右上のコーナーを中心点にしました。

Sample

#sample {
	background: radial-gradient(at right top, yellow, cyan);
	}

「at　中心点」と書きます。「at」を忘れずに。

色を途中で変えてみよう（カラーストップについて）

yellow と cyan の間に white を入れてみました。
デフォルトでは、開始色は円の中心点=0％、終了色はサイズ=100％、途中の色はその中間=50％になっています。

Sample

#sample {
	background: radial-gradient(yellow, white, cyan);
	}

色の切り替え位置（カラーストップ）を指定します。
ここでは白の開始位置を30％の位置、シアンの開始位置を60％に指定しています。

Sample

#sample {
	background: radial-gradient(yellow, white 30%, cyan 60%);
	}

終了色のシアンを150％の位置に指定しています。
このように「サイズ」以上の値も指定できます。（ただしマイナスの値は不可）

Sample

#sample {
	background: radial-gradient(yellow, white 30%, cyan 150%);
	}

中心点やサイズの指定

300×100px のボックスに、サイズは半径 40px の正円、中心点は x方向 40px, y方向 60px で指定しています。

Sample

#sample {
	background: radial-gradient(40px at 40px 60px,yellow, white, cyan);
	}

以下の指定でもまったく同じプレビューになります。
形を「正円（circle）」、サイズを「一番近い辺（closest-side）」にすることで、中心点から一番近い辺までの距離が 40px なので。

Sample

#sample {
	background: radial-gradient(circle closest-side at 40px 60px,yellow, white, cyan);
	}

古いブラウザ用の「ベンダープレフィックス」

構文の「標準型」に対応する前のブラウザバージョンのために、ベンダープレフィックスがありました。

radial-gradient() は、webkit系のAndroidでは4.4（2013年10月リリース）から、SafariとiOSは7.0（2013年9月）からの対応で、それ以前のバージョンのためにベンダープレフィックスが必要ですので、一応 残しておきます。

標準型の構文はこう↓でしたが、
radial-gradient(形状 サイズ at 円の中心点, 開始色, 終了色)

webkit系のベンダープレフィックスはこちら。
-webkit-radial-gradient(円の中心点, 形状 サイズ, 開始色, 終了色)
「at」は使わないのと、円の中心点が先頭、そのあと「,（カンマ）」で区切ります。「形状」と「サイズ」のあいだはカンマは使いません。

標準型と同様に「開始色, 終了色」が必須。他は省略でデフォルト値になります。

Sample

上のサンプルの、ベンダープレフィックスも併記した CSSソースです。

#sample7 {
	background: #0ff; /*←グラデーションに未対応のブラウザ用*/
	background: -webkit-radial-gradient(right bottom,circle 100px,white, yellow, cyan);
	background: radial-gradient(circle 100px at right bottom,white, yellow, cyan);
	}

次回予告

次回は、CSS3の応用編です。
「水玉模様」「たて縞・よこ模様・タータンチェック」を作ってみます。
background-sizeプロパティで、作った図形をタイリングして模様にします。