|
★CSS3リファレンス
linear-gradient()関数は、線形グラデーションを指定する際に使用します。
linear-gradient()関数は、仕様ではbackground-imageプロパティや list-style-imageプロパティなど、 画像を扱うことのできるどのプロパティにも指定できる値とされています。 ただし、現在のところ、FirefoxなどのMozilla系ブラウザは、 グラデーションの指定を background-imageプロパティ、 および、backgroundプロパティの値としてのみサポートしています。
線形グラデーションは、グラデーションラインとそのラインに沿って配置される複数の色を定義することで作成されます。 linear-gradient()関数の書式は以下の通りです。
開始位置と角度を指定すると、グラデーションの方向を定義することができます。 開始位置は、left・center・right、top・center・bottomのキーワード、パーセンテージ、pxなどの単位を付けた数値で指定します。 角度は、degなどの単位を付けた角度値で指定します。 開始位置と角度は省略可能ですが、その場合には初期値のtopになります。
また、グラデーションの開始色と終了色をカンマ（ , ）区切りで指定しますが、 さらにその中間に色を増やしてグラデーションの途中色を指定することもできます。
尚、SafariやGoogle Chromeなどのwebkit系ブラウザでは、以下の書式で指定するとlinear-gradient()関数とほぼ同等の効果を実現できます。
■使用例
スタイルシート部分は外部ファイル（sample.css）に記述。
p.sample1, p.sample2, p.sample3 {width:600px; 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">線形グラデーションのサンプル１</p>
<p class="sample2">線形グラデーションのサンプル２</p>
<p class="sample3">線形グラデーションのサンプル３</p>
</body>
</html>
ブラウザ上の表示
線形グラデーションのサンプル１
線形グラデーションのサンプル２
線形グラデーションのサンプル３
■ベンダープレフィックスを付けた場合の使用例
スタイルシート部分は外部ファイル（sample.css）に記述。
p.prefix_sample1, p.prefix_sample2, p.prefix_sample3 {width:600px; 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">線形グラデーションのサンプル１</p>
<p class="prefix_sample2">線形グラデーションのサンプル２</p>
<p class="prefix_sample3">線形グラデーションのサンプル３</p>
</body>
</html>
ブラウザ上の表示
線形グラデーションのサンプル１
線形グラデーションのサンプル２
線形グラデーションのサンプル３
|
