【HTML & CSS】 liner-gradient関数で線形グラデーションを付ける

予算の都合上、Webデザイナさんが入ってくれないwebシステムで、
プログラマだけで何とかちょっとでもマシなデザインを作るために、知っておくといいかもしれないスタイルシートプロパティを紹介していきます。


border-radiusプロパティで角を丸くする
box-shadowプロパティでボックスに影を付ける

上記に続いて第3弾はグラデーションを付ける方法です。
今まではグラデーション画像を用意して、ボタンなどの背景画像に設定していました。
画像編集ソフトを使うのが面倒で、ボタンは基本ベタ塗りです・・・（；^ω^）
CSS3からはスタイルシートだけでグラデーションが実現できるんです。
便利になりました。

liner-gradient関数で線形グラデーションを付ける

グラデーションはbackgroundプロパティかbackground-imageプロパティに、線形グラデーションであればlinear-gradient()関数を、円形グラデーションであればradial-gradient()関数を指定することで実現します。
今回はliner-gradient関数で線形グラデーションを付ける方法です。

linear-gradient()関数で線形グラデーション

background:linear-gradient(グラデーションの方向、 開始色 0%, 終了色 100%)
または
background-image:linear-gradient(グラデーションの方向、 開始色 0%, 終了色 100%)

グラデーションの方向は、キーワードまたは角度で指定します。

方向	キーワード	角度
下から上	to top	0deg
左から右	to right	90deg
上から下	to bottom	180deg
右から左	to left	270deg

開始色が白、終了色が黒で上から下にグラデーションを付けたい場合は、以下のように指定します。
background:linear-gradient(to bottom, #fff 0%, #000 100%)
または
background:linear-gradient(180deg, #fff 0%, #000 100%)
または
background-image:linear-gradient(to bottom, #fff 0%, #000 100%)
または
background-image:linear-gradient(180deg, #fff 0%, #000 100%)


開始色が白、終了色が黒で左下から右上にグラデーションを付けたい場合は、以下のように指定します。
background:linear-gradient(45deg, #fff 0%, #000 100%)
または
background-image:linear-gradient(45deg, #fff 0%, #000 100%)

linear-gradient()関数の各ブラウザ対応状況

linear-gradient()関数はCSS3の機能で一部のブラウザではベンダープレフィックスを使用する必要があります。

IE	IE10よりサポート
Chrome	Chrome26よりサポート
Firefox	Firefox16よりサポート
Safari	Safari6.1よりサポート
iOs	iOS7.0よりサポート
Android	サポートなし

Android2.1以降ではベンダープレフィックス「-webkit-gradient」を使用します。
Android4.0以降からはベンダープレフィックス「-webkit-linear-gradient」を使用します。
iOS3.2以降ではベンダープレフィックス「-webkit-gradient」を使用します。
iOS5.0以降ではベンダープレフィックス「-webkit-linear-gradient」を使用します。
2014年時点ではスマートフォン向けに「-webkit-linear-gradient」を使用する方がよさそうです。
「-webkit-gradient」を使用するかは微妙な所です。

というわけで、linear-gradientの指定の仕方は下記のようになります。（※2014年9月時点）

.box{
   background-image : -webkit-linear-gradient(top, #fff 0%, #000 100%);
   background-image : linear-gradient(to bottom, #fff 0%, #000 100%)
}

-webkit-linear-gradientで指定できるグラデーションの方向、キーワードまたは角度は、linear-gradientの指定と異なります。

方向	キーワード	角度
下から上	bottom	90deg
左から右	left	0deg
上から下	top	270deg
右から左	right	180deg

linear-gradientの設定を簡単に作成するツール

たとえばコチラ CSS matic のような設定ツールを使うと、linear-gradientの設定が簡単に作成・確認できます。