トップページ  > CSS3  > linear-gradient()

★CSS3リファレンス

linear-gradient() …… 線形グラデーションを指定する
Firefox3(-moz-)Firefox4(-moz-) Google Chrome2(-webkit-)Google Chrome3(-webkit-)Google Chrome4(-webkit-)Google Chrome5(-webkit-)Google Chrome6(-webkit-) Safari4(-webkit-)Safari5(-webkit-)

linear-gradient()関数は、線形グラデーションを指定する際に使用します。

linear-gradient()関数は、仕様ではbackground-imageプロパティや list-style-imageプロパティなど、 画像を扱うことのできるどのプロパティにも指定できる値とされています。 ただし、現在のところ、FirefoxなどのMozilla系ブラウザは、 グラデーションの指定を background-imageプロパティ、 および、backgroundプロパティの値としてのみサポートしています。

線形グラデーションは、グラデーションラインとそのラインに沿って配置される複数の色を定義することで作成されます。 linear-gradient()関数の書式は以下の通りです。

linear-gradient(開始位置と角度, 開始色, 途中色, 終了色);

開始位置と角度を指定すると、グラデーションの方向を定義することができます。 開始位置は、left・center・right、top・center・bottomのキーワード、パーセンテージ、pxなどの単位を付けた数値で指定します。 角度は、degなどの単位を付けた角度値で指定します。 開始位置と角度は省略可能ですが、その場合には初期値のtopになります。

また、グラデーションの開始色と終了色をカンマ( , )区切りで指定しますが、 さらにその中間に色を増やしてグラデーションの途中色を指定することもできます。

尚、SafariやGoogle Chromeなどのwebkit系ブラウザでは、以下の書式で指定するとlinear-gradient()関数とほぼ同等の効果を実現できます。

-webkit-gradient(linear, 開始位置, 終了位置, from(開始色), color-stop(位置, 途中色), to(終了色));

■使用例

スタイルシート部分は外部ファイル(sample.css)に記述。

p.sample1, p.sample2, p.sample3 {
width:300px; height:100px;
}
p.sample1 {
background: linear-gradient(white, gray);
}
p.sample2 {
background: linear-gradient(left, #ff0000, rgba(255,0,0,0));
}
p.sample3 {
background: linear-gradient(left 45deg, red, orange, yellow, green, blue, indigo, violet);
}

HTMLソース

<html>
<head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<p class="sample1">線形グラデーションのサンプル1</p>
<p class="sample2">線形グラデーションのサンプル2</p>
<p class="sample3">線形グラデーションのサンプル3</p>
</body>
</html>
↓↓↓

ブラウザ上の表示

線形グラデーションのサンプル1

線形グラデーションのサンプル2

線形グラデーションのサンプル3

■ベンダープレフィックスを付けた場合の使用例

スタイルシート部分は外部ファイル(sample.css)に記述。

p.prefix_sample1, p.prefix_sample2, p.prefix_sample3 {
width:300px; height:100px;
}
p.prefix_sample1 {
background: -moz-linear-gradient(white, gray);
background: -webkit-gradient(linear, left top, left bottom, from(white), to(gray));
}
p.prefix_sample2 {
background: -moz-linear-gradient(left, #ff0000, rgba(255,0,0,0));
background: -webkit-gradient(linear, left top, right top, from(#ff0000), to(rgba(255,0,0,0)));
}
p.prefix_sample3 {
background: -moz-linear-gradient(left 45deg, red, orange, yellow, green, blue, indigo, violet);
background: -webkit-gradient(linear, left top, right bottom, from(red), color-stop(0.2, orange), color-stop(0.3, yellow), color-stop(0.5, green), color-stop(0.7, blue), color-stop(0.8, indigo), to(violet));
}

HTMLソース

<html>
<head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<p class="prefix_sample1">線形グラデーションのサンプル1</p>
<p class="prefix_sample2">線形グラデーションのサンプル2</p>
<p class="prefix_sample3">線形グラデーションのサンプル3</p>
</body>
</html>
↓↓↓

ブラウザ上の表示

線形グラデーションのサンプル1

線形グラデーションのサンプル2

線形グラデーションのサンプル3

▲ページ先頭へ
トップページ  > CSS3  > linear-gradient()
PR
MuuMuu Domain!
ドメイン取るならお名前.com
さくらのレンタルサーバ
ロリポップ!レンタルサーバー
HTMLクイックリファレンスについて
© HTMQ