[CSS]CSS3グラデーションの表示サンプルと指定方法のまとめ

サイト構築 -CSS

Post on:2010年3月18日

CSS3グラデーションの基礎知識

CSS3グラデーションをサポートしているブラウザは現在のところ、下記の三つです。

Firefox 3.6+
Safari 2+
Chrome

CSS3グラデーションの対応エレメントは、下記の二つです。

background
background-image

CSS3グラデーションの指定方法はmoz系（Firefox）とwebkit系（Safari, Chrome）で異なり、下記のようになります。

moz系

-moz-linear-gradient(<point> || <angle>, color-stops)

1	-moz-linear-gradient(<point> \|\| <angle>, color-stops)

webkit系

-webkit-gradient(linear, <point>, color-stops)

1	-webkit-gradient(linear, <point>, color-stops)

表示サンプルと指定方法

左から右へのグラデーション

background: -moz-linear-gradient(left, #00abeb, #fff);
background: -webkit-gradient(linear, left center, right center, from(#00abeb), to(#fff));

1 2	background: -moz-linear-gradient(left, #00abeb, #fff); background: -webkit-gradient(linear, left center, right center, from(#00abeb), to(#fff));

右から左へのグラデーション

background: -moz-linear-gradient(right, #00abeb, #fff);
background: -webkit-gradient(linear, right center, left center, from(#00abeb), to(#fff));

1 2	background: -moz-linear-gradient(right, #00abeb, #fff); background: -webkit-gradient(linear, right center, left center, from(#00abeb), to(#fff));

上から下へのグラデーション

background: -moz-linear-gradient(top, #00abeb, #fff);
background: -webkit-gradient(linear, center top, center bottom, from(#00abeb), to(#fff));

1 2	background: -moz-linear-gradient(top, #00abeb, #fff); background: -webkit-gradient(linear, center top, center bottom, from(#00abeb), to(#fff));

下から上へのグラデーション

background: -moz-linear-gradient(bottom, #00abeb, #fff);
background: -webkit-gradient(linear, center bottom, center top, from(#00abeb), to(#fff));

1 2	background: -moz-linear-gradient(bottom, #00abeb, #fff); background: -webkit-gradient(linear, center bottom, center top, from(#00abeb), to(#fff));

左上から右下へのグラデーション

background: -moz-linear-gradient(left top 315deg, #00abeb, #fff);
background: -webkit-gradient(linear, left top, right bottom, from(#00abeb), to(#fff));

1 2	background: -moz-linear-gradient(left top 315deg, #00abeb, #fff); background: -webkit-gradient(linear, left top, right bottom, from(#00abeb), to(#fff));

右上から左下へのグラデーション

background: -moz-linear-gradient(right top 225deg, #00abeb, #fff);
background: -webkit-gradient(linear, right top, left bottom, from(#00abeb), to(#fff));

1 2	background: -moz-linear-gradient(right top 225deg, #00abeb, #fff); background: -webkit-gradient(linear, right top, left bottom, from(#00abeb), to(#fff));

左から右へのグラデーションで途中でとめる

background: -moz-linear-gradient(left, #00abeb, #fff 45%);
background: -webkit-gradient(linear, left center, right center, from(#00abeb), color-stop(45%, #fff));

1 2	background: -moz-linear-gradient(left, #00abeb, #fff 45%); background: -webkit-gradient(linear, left center, right center, from(#00abeb), color-stop(45%, #fff));

左上からオレンジ・イエロー・ホワイトのグラデーション

background: -moz-linear-gradient(left top 315deg, orange, yellow 30%, white 40%);
background: -webkit-gradient(linear, left top, right bottom, from(orange), color-stop(30%, yellow), color-stop(40%, white));

1 2	background: -moz-linear-gradient(left top 315deg, orange, yellow 30%, white 40%); background: -webkit-gradient(linear, left top, right bottom, from(orange), color-stop(30%, yellow), color-stop(40%, white));

暗いブルーと明るいブルーと中間のブルーを均等にフェードさせるグラデーション

background: -moz-linear-gradient(center top, #b8d8f2, #92bde0 25%, #3282c2 50%, #92bde0 75%, #b8d8f2);
background: -webkit-gradient(linear, center top, center bottom, from(#b8d8f2), color-stop(25%, #92bde0), color-stop(50%, #3282c2), color-stop(75%, #92bde0), to(#b8d8f2));

1 2	background: -moz-linear-gradient(center top, #b8d8f2, #92bde0 25%, #3282c2 50%, #92bde0 75%, #b8d8f2); background: -webkit-gradient(linear, center top, center bottom, from(#b8d8f2), color-stop(25%, #92bde0), color-stop(50%, #3282c2), color-stop(75%, #92bde0), to(#b8d8f2));

7色のレインボーカラーのグラデーション

background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);
background: -webkit-gradient(linear, left center, right center, from(red), color-stop(14%, orange), color-stop(28%, yellow), color-stop(42%, green), color-stop(56%, blue), color-stop(70%, indigo), to(violet));

1 2	background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); background: -webkit-gradient(linear, left center, right center, from(red), color-stop(14%, orange), color-stop(28%, yellow), color-stop(42%, green), color-stop(56%, blue), color-stop(70%, indigo), to(violet));