【CSS3リファレンス】linear-gradient

こんにちは（・∀・）

CSS3で新しく追加されたプロパティをご紹介します。今回ご紹介するCSSプロパティはlinear-gradientです。

概要

linear-gradientプロパティ(線形グラデーション)は背景の色をグラデーションに設定する事ができるプロパティです。

今まではグラデーション加工する場合、画像を使わなければグラデーション効果の背景色を設定する事ができませんでしたが、linear-gradientプロパティを使えばCSSだけで背景色のグラデーションができるようになりました。

当初はブラウザによって書き方が違うなど書式もバラバラでしたが、最近ではwebkitやFirefoxも同様の書式で設定する事ができるようになり、より使いやすいプロパティとなってきました。

.sample {
  background: linear-gradient(開始位置・角度, 開始色, 途中の色, 終了色);
}

開始位置はleft・center・right、top・center・bottomのキーワードや座標の数値で指定することができます。指定しない場合、初期値はtopです。角度はグラデーションの方向を指定します。

右方向が0°で反時計回りです。指定しない場合、開始位置から中心点に向かう角度になり、開始位置と反対方向になります。leftなら右へ、topなら下です。Firefox以外は角度に対応しておりません。角度指定するとCSSが無効となりますのでご注意ください。

横方向のグラデーションを表示する場合、「to 終了位置」の方向で指定しないと正しく表示されません。 開始位置を「left」のように指定したい場合はベンダープレフィックスが必要になります。

.sample {
  background: linear-gradient(to 終了位置, 開始色, 途中の色, 終了色);
}

開始色と終了色の間に入れる色はあっても無くとも、またはいくつでも増やすことができます。色の指定とオフセットはセットで指定します。オフセットを省略した場合、それぞれの色は等間隔で表示されます。

サンプル

HTML

<p class="demo1">サンプルデモ1</p>
<p class="demo2">サンプルデモ2</p>
<p class="demo3">サンプルデモ3(mozira系のみベンダープレフィックスを使用すれば、角度指定して表示する事ができます。)</p>

CSS

.demo1 {
  background: linear-gradient(pink 0%, #fff 50%, lightblue 100%);
}
.demo2 {
  background: linear-gradient(to right, pink 0%, lightblue 100%);
}
.demo3 {
  background: -moz-linear-gradient(to right 45deg, pink 0%, #fff 50%, lightblue 100%);
}

Result