CSS3 線のグラデーションのサンプル(linear-gradient)

CSS3の線のグラデーションのサンプルです。
linear-gradient関数を使用します。

サンプル
linear-gradient 関数
色の停止の位置を追加したサンプル
repeating-linear-gradient関数 (繰り返して表示)

サンプル

linear-gradient関数を使用したサンプルです。

test1
30deg,DeepPink,Aqua,Gold

test2
0deg,DeepPink,Aqua

test3
90deg,DeepPink,Aqua

test4
180deg,DeepPink,Aqua

test5
270deg,DeepPink,Aqua

linear-gradient 関数

プロパティ : linear-gradient ( 値1,　値2,　値3,　値4 )

値	説明
値1(方向)	１．グラデーションの角度(deg)を指定します。 0度の場合、最初の色(値2)が下で終了の色(値4)が上です。 90度の場合、最初の色(値2)が左で終了の色(値4)が右です。 180度の場合、最初の色(値2)が上で終了の色(値4)が下です。 270度の場合、最初の色(値2)が右で終了の色(値4)が左です。
値1(方向)	２．キーワードでの指定も可能です。 to top、to right、to bottom、to leftはそれぞれ角度 0deg、90deg、180deg、270degに変換されます
値2(最初の色と停止の位置)	色と停止の位置(カラーストップ)を指定します。(半角スペースで区切る) 位置は、数値+単位または数値%で表します。位置は省略可能です。
値3(途中の色と停止の位置)	色と停止の位置(カラーストップ)を指定します。(半角スペースで区切る) 途中の色は、複数指定可能です。途中の色自体の省略も可能です。位置は、数値+単位または数値%で表します。位置は省略可能です。
値4(終了の色と停止の位置)	色と停止の位置(カラーストップ)を指定します。(半角スペースで区切る) 位置は、数値+単位または数値%で表します。位置は省略可能です。

CSSの関数です。
指定した色から色へ線状にグラデーションさせることができます。
以下はMDNの linear-gradient関数のリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/linear-gradient

コード

上記サンプルのコードです。
test1は、値を４つ（角度(deg)、最初の色、途中の色、終了の色）指定しています。
test2からtest5までは角度(deg)をそれぞれ0,90,180,270とし、途中の色は省略しています。

<style>
#test1{
	background:linear-gradient(30deg,DeepPink,Aqua,Gold);
}
#test2{
	background:linear-gradient(0deg,DeepPink,Aqua);
}
#test3{
	background:linear-gradient(90deg,DeepPink,Aqua);
}
#test4{
	background:linear-gradient(180deg,DeepPink,Aqua);
}
#test5{
	background:linear-gradient(270deg,DeepPink,Aqua);
}
.c1 div{ width:300px;border: 1px solid #000;
height:50px;text-align: center;margin-bottom:20px;}
</style>
<body>
<div class="c1">
	<div id="test1">test1<br>30deg,DeepPink,Aqua,Gold</div>
	<div id="test2">test2<br>0deg,DeepPink,Aqua</div>
	<div id="test3">test3<br>90deg,DeepPink,Aqua</div>
	<div id="test4">test4<br>180deg,DeepPink,Aqua</div>
	<div id="test5">test5<br>270deg,DeepPink,Aqua</div>
</div>
</body>

色の停止の位置を追加したサンプル

色の停止の位置を追加したサンプルです。

test1
30deg,DeepPink 10%,Aqua 20%,Gold 100%

test2
30deg,DeepPink 80%,Aqua 90%,Gold 100%

コード

上記サンプルのコードです。
3,6行目で停止の位置を指定しています。
色と停止の位置の間は半角スペースで区切ります。

<style>
#test10{
	background:linear-gradient(30deg,DeepPink 10%,Aqua 20%,Gold 100%);
}
#test11{
	background:linear-gradient(30deg,DeepPink 80%,Aqua 90%,Gold 100%);
}
.c2 div{ width:300px;border: 1px solid #000;
height:150px;text-align: center;margin-bottom:20px;}
</style>
<body>
<div class="c2">
	<div id="test10">test1<br>30deg,DeepPink 10%,Aqua 20%,Gold 100%</div>
	<div id="test11">test2<br>30deg,DeepPink 80%,Aqua 90%,Gold 100%</div>
</div>
</body>

repeating-linear-gradient関数 (繰り返して表示)

グラデーションを繰り返して表示することができます。
引数は、上記のlinear-gradient関数と同じです。
以下はMDNの repeating-linear-gradient関数のリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/repeating-linear-gradient

サンプル

repeating-linear-gradient関数を使用したサンプルです。

test1
30deg,DeepPink 2%,Aqua 5%,Gold 8%

test2
30deg,DeepPink 20%,Aqua 50%,Gold 80%

コード

上記サンプルのコードです。

<style>
#test20{
background:repeating-linear-gradient(30deg,DeepPink 2%,Aqua 5%,Gold 8%);
		
}
#test21{
background:repeating-linear-gradient(30deg,DeepPink 20%,Aqua 50%,Gold 80%);
}
.c3 div{ width:300px;border: 1px solid #000;
height:150px;text-align: center;margin-bottom:20px;}
</style>
<body>
<div class="c3">
	<div id="test20">test1<br>30deg,DeepPink 2%,Aqua 5%,Gold 8%</div>
	<div id="test21">test2<br>30deg,DeepPink 20%,Aqua 50%,Gold 80%</div>
</div>
</body>