Three.jsを使って、作ってみた

プログラミング関連の事を色々書いています(^^) 週末はレストランやコンビニのお菓子のことを書いています。

CSS3 radial-gradient() 円形グラデーション

今回は、CSS3の「radial-gradient()」について書きます。


「radial-gradient()」は、円形グラデーションを指定するときに使います。
f:id:gupuru:20140315224100p:plain


基本的な所は、線形グラデーションの「linear-gradient()」と同じです。


基本の使い方は、こちらです。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>css3</title>
	<style>
	 div {
	 	width: 200px;
	 	height: 200px;
	 	background: radial-gradient(red,green);
	 }
	</style>
</head>
<body>
	<div id="maru"></div>
</body>
</html>

実行結果
f:id:gupuru:20140315224429p:plain

radial-gradient()は、こんな感じに使っています。

background: radial-gradient(red,green);


radial-gradient()の書式はこうなっています。

radial-gradient(開始位置と角度, 形状とサイズ, 開始色, 途中色, 終了色);

上のプログラムですと、開始色が赤(red)、終了色が緑(green)となっています。
また、「 -webkit-」などのベンダープレフィックスは、適宜つけてください。



ここからは、もう少し詳しく書きます。

  • 途中色

途中色を使用すると、開始色と終了色の間にもう一つ色を追加できます。
途中色を使うと、こうなります。
f:id:gupuru:20140315225101p:plain

	background: radial-gradient(red,green,blue);

開始色にred、途中色にgreen、終了色にblueを使用しています。

  • 色の割合

色の割合も変更できます。
変更するには、「%」などを使います。

    background: radial-gradient(red 10%,green 60%,blue 30%);

f:id:gupuru:20140315225509p:plain

「red 10%」のように色の後ろに「10%」と書きます。

  • グラデーションの形状

通常のグラデーションの形状は、楕円です。
f:id:gupuru:20140315225841p:plain

楕円の形を正円に変えることができます。
やり方は、簡単です。
色を指定している前に、「circle」とつければokです。

radial-gradient(circle,red,green);

f:id:gupuru:20140315230111p:plain

さらに、こちらの機能にはオプションが複数あります。
ここでは、オプションの1つの「contain」を紹介します。

オプションの指定方法は、「circle」の後ろに書きます。

-webkit-radial-gradient(circle contain,red,green);

「contain」は、円が含まれるように描画してくれます。
f:id:gupuru:20140315230757p:plain
円全体が描画している事がわかります。


他にもあるので、興味がある方は調べてみてください^^


参考サイト
radial-gradient()-CSS3リファレンス

広告を非表示にする