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

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

CSS3 線形グラデーション linear-gradient()

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


linear-gradient()は、線形グラデーションを指定するときに使います。
f:id:gupuru:20140313114909p:plain
グラデーションは、上の写真のように、徐々に色が濃くなり薄くなる感じものです。


基本的にこのように使います。

linear-gradient(red,blue);

1番目は、開始色で、2番目は終了色です。(上のプログラムだと、redが開始色、blueが終了色です)


実際のプログラムで、試してみます。

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

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



ここからは、もう少し詳しく「linear-gradient」について書きます。

・途中色をつけれます。

linear-gradient(red,blue,pink);
/*(開始色,途中色,終了色)*/

f:id:gupuru:20140313121251p:plain
1番目は開始色、2番目は途中色、3番目が終了色となります。


・色の割合も調節できます。

linear-gradient(red 10%,blue 20%,pink 70%);

f:id:gupuru:20140313121802p:plain
色の後ろに「%」または「px」で指定すると割合を調節できます。


・グラデーションを始める位置を変更できます
開始位置は、left,right,top,bottomで指定します。

-webkit-linear-gradient(left, #ff0000, rgba(255,0,0,0));
/*(開始位置,開始色,終了色)*/

f:id:gupuru:20140313122531p:plain
今回は、「-webkit-」をつけています。「linear-gradient」だけだとchromeでは、反応がありませんでした。

ちなみに、

 -webkit-linear-gradient(left top, #ff0000, rgba(255,0,0,0));

開始位置は、2つでも指定できます。

また、

-webkit-linear-gradient(45deg, #ff0000, rgba(255,0,0,0));

「45deg」のように度数で指定することもできます。



参考サイト
グラデーション - Wikipedia
linear-gradient()-CSS3リファレンス