最近は、たくさんのグラデーション出来るツールがありますがどのように作成されているのかという成り立ちを知っておくとあの部分はこういうことなのかと発見できたり、いろいろと応用なども出来るのではないでしょうか。
『webkit系』『mozilla系』,『InternetExplorer』での記述方法が若干違います。
『webkit系』？って何？『mozilla系』？って何？となった方はこちらのウェブブラウザの一覧(※ wiki参照)をご覧ください。
まずは、デモをご覧ください。
対応ブラウザ
Google Chrome / Safari 5+/ Firefox 7+/ Opera 11+/ InternetExplorer 10
『webkit系』の基本的な記述
|
1 2 |
/* webkit系 */ background: -webkit-gradient(linear, lefttop, rightbottom, from(#f858ef), to(#ffe413)); |
上記の内容を図にしてみると
緑の字のところがグラデーションする位置で、ピンクの字のところがグラデーションの色を指定しています。
『mozilla系』の基本的な記述
|
1 2 |
/* Mozilla系 */ background: -moz-linear-gradient(left, #f0b7a1, #bf6e4e); |
上記の内容を図にしてみると
緑の字のところがグラデーションする位置で、ピンクの字のところがグラデーションの色を指定しています。
『InternetExplorer』の基本的な記述
IE5.5-7に対応させるための記述
|
1 2 3 4 |
/* InternetExplorer */ filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#f0b7a1', endColorstr='#bf6e4e', GradientType=1); |
上記の内容を図にしてみると
緑の字のところがグラデーションする位置で、ピンクの字のところがグラデーションの色を指定しています。
IE8-9に対応させるための記述
|
1 2 |
/* InternetExplorer */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0b7a1', endColorstr='#bf6e4e', GradientType=0)"; |
IE10に対応させるための記述
|
1 2 |
/* InternetExplorer */ background: linear-gradient(to bottom, #f0b7a1, #bf6e4e); |
GradientTypeについて
- GradientType=1は水平方向へグラデーションします。
- GradientType=0は垂直方向へグラデーションします。
一括指定する
上記を踏まえて、グラデーションする位置が上から下への場合の一括指定で書くにはこのように書きます。
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
/* webkit系 */ background: -webkit-gradient(linear, left top, right bottom, from(#f858ef), to(#ffe413)); /* Mozilla系 */ background: -moz-linear-gradient(left, #f858ef, #ffe413); /* InternetExplorer */ /* IE5.5-7 */ filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#f0b7a1', endColorstr='#bf6e4e', GradientType=1); /* IE8-9 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0b7a1', endColorstr='#bf6e4e', GradientType=0)"; /* IE10 */ background: -ms-linear-gradient(left, #f858ef, #ffe413); |
複数の色を使ったグラデーション
※ InternetExplorerで確認できなかったので、今回は対象外。
基本的な書き方というのは、変わらないのですが 複数の色を使うので、そのために途中、色をどれだけの範囲で使うのかというのを追加する感じで、書いていきます。
『webkit系』
|
1 2 3 4 5 6 |
/* Webkit系 */ background: -webkit-gradient(linear, left top, rightright bottombottom, from(#2343E2), color-stop(0.3, #c36), color-stop(0.5, #f60), color-stop(0.7, #000), to(#00FFD8)); |
『mozilla系』
|
1 2 3 4 5 6 |
/* mozilla系 */ background: -moz-linear-gradient(left top, #2343E2, #c36 30%, #f60 50%, #ccc 70%, #00FFD8); |
ここでいろいろ書いたのをサンプルとしてつくりました。
サンプルをダウンロードする
※ 追記
今一度まとめ的な記事書きました。宜しければそちらも読んでいただければと思います。
