HOME > コラム > CSS Chips > CSSで放射状(円形)グラデーション

CSSで放射状(円形)グラデーション

コラム

今回は、CSS3で放射状(円形)のグラデーションをつくってみたいと思います。
細かい指定があるので、その指定する要領を掴んでもらうことがポイントです。
実際に放射状(円形)でグラデーションを使うシーンってあんまりないんですけどね、こういうテクニカルなことを少し知っておくだけでも幅が広がると思います。
是非、頭の片隅に置いといてもらえたらと思う次第です。
「ちょっとは役に立ったかな?」や「ちょっと面白いな(笑)」みたいなことを感じられましたら、シェアして頂けますと幸いです。

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に対応するためには、本家サイトで仕様のご確認をお願い致します。

IE対応は細かいため、全ての対応は難しい部分があります。
ご自身で対応範囲を決めてご対応を頂くことがベストです。
本項ではあくまでSEMラボラトリー対応範囲ということで捉えて下さい。

ただ、弊社でも、コーディング仕様はHTMLやCSSが発展すると同時に基準は変わります。
ですので、その場合は追記編集ということで後書きを入れますので、くれぐれも宜しくお願い致します。

締め

ということで、CSSでグラデーションについての解説は以上です。

CSSでグラデーションを本格的に運用されているサイトではあまり見かけません。
ですので、知識を深めるための教材・・・という認識で憶えて頂いても差し支えはないかもしれません。

最近ではjQueryでインターフェイスのコントロールが容易になってきたので、このような一部的にデザインを画像に頼らない場合、jQueryで対応する方がベターなことも多くなってきました。
ということで、こういうことも出来るんだね・・・的な感じで参考にして頂ければと思います。

執筆 : 清水 隼斗

CSSで放射状(円形)グラデーションの通常ページ

CSSで放射状(円形)グラデーション」のシェアをお願い致します!