2014年9月5日金曜日

【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の機能で一部のブラウザではベンダープレフィックスを使用する必要があります。
IEIE10よりサポート
ChromeChrome26よりサポート
FirefoxFirefox16よりサポート
SafariSafari6.1よりサポート
iOsiOS7.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の設定が簡単に作成・確認できます。

0 件のコメント: