CSSで放射状（円形）グラデーション

コラム

今回は、CSS3で放射状（円形）のグラデーションをつくってみたいと思います。
細かい指定があるので、その指定する要領を掴んでもらうことがポイントです。
実際に放射状（円形）でグラデーションを使うシーンってあんまりないんですけどね、こういうテクニカルなことを少し知っておくだけでも幅が広がると思います。
是非、頭の片隅に置いといてもらえたらと思う次第です。

「ちょっとは役に立ったかな？」や「ちょっと面白いな（笑）」みたいなことを感じられましたら、シェアして頂けますと幸いです。

CSS Chipsに投稿したコラム記事

CSSで放射状（円形）グラデーション

CSS Chips

単純なCSSのグラデーション

CSSでのグラデーションの基本は前の記事をご覧下さい。
今回の記事は、それらの応用になります。

CSSでグラデーション

通常の円形グラデーション

ベーシックな円形グラデーションです。

<div id="en_gra_01">
円形グラデーションコンテンツ
</div>

#en_gra_01 {
	color: #fff;
	display: inline-block;
	margin: 0 auto;
	padding: 50px 20px;
	background: -ms-radial-gradient(center, circle cover, #DF3A01, #8A2908);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#DF3A01', endColorstr='#8A2908', GradientType=0)";
	background: -moz-radial-gradient(center, circle cover, #DF3A01, #8A2908);
	background: -webkit-gradient(radial, center center, 0, center center, 100, from(#DF3A01), to(#8A2908));
}

サンプル表示

円形グラデーションコンテンツ

ポイントは以下の通りではないでしょうか。

円形グラデーションをIE9以下のバージョンには対応していません。
ということで、縦グラデーションから横グラデーションのフォローをfilterで行っています。
縦横グラデーションの記述にある「 linear 」の箇所を「 radial 」に変更して下さい。
円のサイズや形を決めることが出来ます。

円の位置を変えてみましょう

それでは、円の位置をベーシックな記述を元に変えていきますね。

<div id="en_gra_02">
円の位置を変えた
円形グラデーションコンテンツ
</div>

#en_gra_02 {
	color: #fff;
	display: inline-block;
	margin: 0 auto;
	padding: 50px 20px;
	background: -ms-radial-gradient(right top, circle cover, #DF3A01, #8A2908);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#DF3A01', endColorstr='#8A2908', GradientType=0)";
	background: -moz-radial-gradient(right top, circle cover, #DF3A01, #8A2908);
	background: -webkit-gradient(radial, right top, 0, right top, 100, from(#DF3A01), to(#8A2908));
}

サンプル表示

円の位置を変えた
円形グラデーションコンテンツ

上記は右上に円の中心を持ってきたグラデーションです。
大きなバグもなく表示されます。

その他、細かい指定について

その他、以下のような細かい指定ができます。

円の大きさを変更することが出来ます。
虹のように色を何色も表示することが出来ます。
何色も表示させる場合、色の領域をコントロールすることが出来ます。

ただし、本項ではここまでで解説を終了したいと思います。

サンプルを見て頂いても分かるかもしれませんが、-mozと-webkitでは、斜め上からの円形グラデーションの色の領域に違いがあります。
そして、その差が若干大きいと見受けています。
これはブラウザバグなどではなくデフォルトの仕様の問題です。
弊社ではここまで差が出る場合、画像を作成するべきだと考えています。

実際、円形グラデーションについては、まだ実装で使ったことがありません・・・苦笑
ということで、やはり見え方に違いがある記述を深く追おうとは思えませんでして・・・。

IE対応については・・・

やはりIEに対応するためには、本家サイトで仕様のご確認をお願い致します。