linear-gradient()関数は、線形グラデーションを指定する際に使用します。
グラデーションの角度は、degなどの単位を付けた角度値で指定します。
また、グラデーションの開始色と終了色は、カンマ（ , ）区切りで指定します。
<div style="width:150px; margin:2px; background: linear-gradient(white, navy);">角度を省略</div> <div style="width:150px; margin:2px; background: linear-gradient(0deg, white, navy);">0deg</div> <div style="width:150px; margin:2px; background: linear-gradient(90deg, white, navy);">90deg</div> <div style="width:150px; margin:2px; background: linear-gradient(180deg, white, navy);">180deg</div> <div style="width:150px; margin:2px; background: linear-gradient(270deg, white, navy);">270deg</div> <div style="width:150px; margin:2px; background: linear-gradient(45deg, white, navy);">45deg</div> <div style="width:150px; margin:2px; background: linear-gradient(225deg, white, navy);">225deg</div>
角度値の代わりに、left, right や、top, bottomなどの位置を表すキーワードを使用してグラデ―ショーンの方向を指定することもできます。
以下のように toに続けて位置を表すキーワードを記述します。
0deg は to top 、
90deg は to right 、
180deg は to bottom 、
270deg は to left にそれぞれ置き換えることができます。
グラデーションの角度（方向）の初期値は、180deg（to bottom）です。
<div style="width:150px; margin:2px; background: linear-gradient(white, navy);">方向を省略</div> <div style="width:150px; margin:2px; background: linear-gradient(to top, white, navy);">to top</div> <div style="width:150px; margin:2px; background: linear-gradient(to left, white, navy);">to left</div> <div style="width:150px; margin:2px; background: linear-gradient(to bottom, white, navy);">to bottom</div> <div style="width:150px; margin:2px; background: linear-gradient(to right, white, navy);">to right</div> <div style="width:150px; margin:2px; background: linear-gradient(to top right, white, navy);">to top right</div> <div style="width:150px; margin:2px; background: linear-gradient(to bottom left, white, navy);">to bottom left</div>
グラデーションの開始色と終了色はカンマ（ , ）区切りで指定しますが、さらにその中間に色を増やしてグラデーションの途中色を指定することもできます。
<div style="width:150px; margin:2px; background: linear-gradient(white, aqua, blue, navy);">角度を省略</div> <div style="width:150px; margin:2px; background: linear-gradient(0deg, white, aqua, blue, navy);">0deg</div> <div style="width:150px; margin:2px; background: linear-gradient(90deg, white, aqua, blue, navy);">90deg</div> <div style="width:150px; margin:2px; background: linear-gradient(180deg, white, aqua, blue, navy);">180deg</div> <div style="width:150px; margin:2px; background: linear-gradient(270deg, white, aqua, blue, navy);">270deg</div> <div style="width:150px; margin:2px; background: linear-gradient(45deg, white, aqua, blue, navy);">45deg</div> <div style="width:150px; margin:2px; background: linear-gradient(225deg, white, aqua, blue, navy);">225deg</div>
線形グラデーションは、グラデーションラインとそのラインに沿って配置される複数の色を定義することで作成されます。
グラデーションラインの角度によっては開始位置と終了位置がボックスの外側に配置される場合がありますが、ボックスのコーナーは開始色と終了色の純色となります。
linear-gradient()関数は、
background-imageプロパティや
list-style-imageプロパティなど、
画像を扱うことのできるプロパティの値として指定できます。
以下の使用例では、
backgroundプロパティの値にlinear-gradient()関数を使用しています。
以下は、linear-gradient()関数の様々な使用例です。
p.sample1, p.sample2, p.sample3, p.sample4 {
width:300px; height:100px;
}
p.sample1 {
background: linear-gradient(white, gray);
}
p.sample2 {
background: linear-gradient(90deg, #ff0000, rgba(255,0,0,0));
}
p.sample3 {
background: linear-gradient(135deg, red, orange, yellow, green, blue, indigo, violet);
}
p.sample4 {
background: linear-gradient(135deg, red 50px, yellow 70px, skyblue 100px);
}
<html>
<head>
<link rel=”stylesheet” href=”sample.css”
type=”text/css”>
</head>
<body>
<p class=”sample1″>線形グラデーション１</p>
<p class=”sample2″>線形グラデーション２</p>
<p class=”sample3″>線形グラデーション３</p>
<p class=”sample4″>線形グラデーション４</p>
</body>
</html>
線形グラデーション１
線形グラデーション２
線形グラデーション３
線形グラデーション４
以下のベンダープレフィックス付きの使用例は、草案時点の旧い記述形式によるものです。
linear-gradient()関数は、草案と標準ではグラデーションのデフォルトの開始位置が変更されています。
そのため、上記の標準使用例と同様の表示を実現するために、以下のベンダープレフィックス付きソースでは指定する角度値が異なっている点に注意してください。
例えば、
標準で 90deg と指定したものはベンダープレフィックス付きでは 0deg に、標準で 135deg と指定したものはベンダープレフィックス付きでは 315deg に変更しています。
p.prefix_sample1, p.prefix_sample2, p.prefix_sample3, p.prefix_sample4 {
width:300px; height:100px;
}
p.prefix_sample1 {
background: -moz-linear-gradient(white, gray);
background: -webkit-linear-gradient(white, gray);
background: -ms-linear-gradient(white, gray);
}
p.prefix_sample2 {
background: -moz-linear-gradient(0deg, #ff0000, rgba(255,0,0,0));
background: -webkit-linear-gradient(0deg, #ff0000, rgba(255,0,0,0));
background: -ms-linear-gradient(0deg, #ff0000, rgba(255,0,0,0));
}
p.prefix_sample3 {
background: -moz-linear-gradient(315deg, red, orange, yellow, green, blue, indigo, violet);
background: -webkit-linear-gradient(315deg, red, orange, yellow, green, blue, indigo, violet);
background: -ms-linear-gradient(315deg, red, orange, yellow, green, blue, indigo, violet);
}
p.prefix_sample4 {
background: -moz-linear-gradient(315deg, red 50px, yellow 70px, skyblue 100px);
background: -webkit-linear-gradient(315deg, red 50px, yellow 70px, skyblue 100px);
background: -ms-linear-gradient(315deg, red 50px, yellow 70px, skyblue 100px);
}
<html>
<head>
<link rel=”stylesheet” href=”sample.css”
type=”text/css”>
</head>
<body>
<p class=”prefix_sample1″>線形グラデーション１</p>
<p class=”prefix_sample2″>線形グラデーション２</p>
<p class=”prefix_sample3″>線形グラデーション３</p>
<p class=”prefix_sample4″>線形グラデーション４</p>
</body>
</html>
線形グラデーション１
線形グラデーション２
線形グラデーション３
線形グラデーション４
