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

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

• IE10のプレフィックスのないCSS3グラデーション

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

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

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

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

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

執筆 : 清水 隼斗

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