menu
menu

キーワード検索

 

最近の投稿

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

  • CSS

linear-gradient

こんにちは(・∀・)

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

概要

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

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

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

SafariはVendor-Prefixを使うと使用できるようになります。

横方向のグラデーションをIE、Firefox、Chrome、Safariで表示する場合、Vendor-Prefixを使用しないと正しく表示されません。


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

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

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

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

サンプルデモ
HTML

<p class="demo1">サンプルデモ1</p>
<p class="demo2">サンプルデモ2</p>
<p class="demo3">サンプルデモ3(mozira系のみ角度指定して表示する事ができます。)</p>
CSS

.demo1 {
  background: -webkit-linear-gradient(#fff 0%, blue 50%, #000 100%);
  background: linear-gradient(#fff 0%, blue 50%, #000 100%);
}
.demo2 {
  background: -webkit-linear-gradient(left, red 0%, blue 100%);
  background: linear-gradient(left, red 0%, blue 100%);
}
.demo3 {
  background: -moz-linear-gradient(left 45deg, red 0%, blue 100%);
}
Result

サンプルデモ1


サンプルデモ2


サンプルデモ3(mozira系のみ角度指定して表示する事ができます。)

関連リンク

CSS3リファレンス

  • カテゴリー:CSS