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

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

コード

上記サンプルのコードです。
test1は、値を4つ(角度(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関数 (繰り返して表示)

サンプル

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>

関連の記事

CSS 背景色を指定するサンプル(background-color)
CSS 背景画像を指定するサンプル(background-image)
CSS 背景画像の繰り返し方法を指定するサンプル(background-repeat)
CSS3 枠線の角を丸くするサンプル(border-radius)
CSS3 ボックスに影をつけるサンプル(box-shadow)
CSS3 文字に影をつけるサンプル(text-shadow)
CSS3 透明度を指定するサンプル(opacity)
CSS3 円のグラデーションのサンプル(radial-gradient)



△上に戻る