【CSS】CSS3でグラデーションを作るメモ
2017/12/09
CSS3でグラデーションを作る際、コピペですぐ出来るよう、忘備録としてポストします。
CSS3でグラデーション
主要ブラウザのベンダープレフィックス
まずは各ブラウザに対応するベンダープレフィックスの一覧。
- -webkit- ・・・ Chrome、Safari
- -moz- ・・・ Firefox
- -ms- ・・・ IE
- -o- ・・・ Opera
とりあえず、-webkit- と -moz- 、ベンダープレフィックスなしとを併記という形が良さそうです。
linear-gradient() でグラデーション作成
実際に書く際は、ブラウザそれぞれで先に挙げたベンダープレフィックスが必要になってきます。
尚、IEはバージョン10以降で linear-gradient() に対応しています。
ということで、まずは以下のように。
|
1 2 3 4 5 6 7 |
.gradationBox{ background: -webkit-linear-gradient(linear, left top, left bottom, from(#fff), to(#666)); background: -moz-linear-gradient(top, #fff, #666); background: -ms-linear-gradient(top, #fff, #666); background: -o-linear-gradient(top, #fff, #666); background: linear-gradient(to bottom, #fff, #666); } |
これで、上から【白 → 灰色】のグラデが出来上がります。
linear-gradient()リファレンス
|
1 |
linear-gradient(グラデーションの向き, 開始色, 途中色, 終了色); |
Androidに対応させる
Android は linear-gradient() に4.0以降で対応していますが、2.* では -webkit-gradient() という独自拡張で対応しているようです。
なので、先ほどのCSSに追加して以下のように。
記述は現行バージョンの書き方よりも先に記述し、最新バージョンでは -webkit-linear-gradient() が優先されるようにします。
|
1 2 3 4 5 6 7 8 |
.gradationBox{ background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#666)); background: -webkit-linear-gradient(linear, left top, left bottom, from(#fff), to(#666)); background: -moz-linear-gradient(top, #fff, #666); background: -ms-linear-gradient(top, #fff, #666); background: -o-linear-gradient(top, #fff, #666); background: linear-gradient(to bottom, #fff, #666); } |
-webkit-gradient() リファレンス
|
1 |
-webkit-gradient(linear, 開始位置, 終了位置, from(開始色), color-stop(位置, 途中色), to(終了色)); |
必要な物を取捨選択
と、ここまで来ましたが、５個も書くのは面倒。
そもそもベンダープレフィックスは本当に必要なのかという疑問が浮かびます。
例えばIE。
バージョン10以降で linear-gradient() に対応、とあるのに、-ms-linear-gradient() とすると書いています。
なんか矛盾してますね。
他のブラウザの linear-gradient() のサポート状況も調べると、
- IE
- IE10から linear-gradient() サポート
- Chrome
- Chrome26以降でlinear-gradient でサポート
- Firefox
- Firefox16(2012.10リリース)以降：linear-gradient でサポート
- safari
- safari6.1, Safari7.0以降：linear-gradient でサポート
- Opera
- Opera12.1, Opera15以降(2013.7リリース)：linear-gradient でサポート
- iOS
- iOS7.0以降：linear-gradient でサポート
- Android
-
Android2.1-3.0：-webkit-gradient()で先行実装
Android4.0以降：-webkit-linear-gradient()で先行実装
linear-gradient のサポートなし
以上のようになっていたので、最終結果は、以下のようにしてみました。（IE9以前には非対応）
|
1 2 3 4 5 6 |
.gradationBox{ background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#666)); background: -webkit-linear-gradient(top, #fff, #666); background: linear-gradient(top, #fff, #666); background: linear-gradient(to bottom, #fff, #dfdfdf); } |
内訳は
1行目：古いAndroid用
2行目：Android4.0以降用
3行目：その他、linear-gradient対応ブラウザ用
となっています。
参考サイト
[tgAmazonItemLookup asin="B009C6W1PA" related="1"]