【CSS】CSS3でグラデーションを作るメモ

2014/08/27 2017/12/09

CSS3でグラデーションを作る際、コピペですぐ出来るよう、忘備録としてポストします。

CSS3でグラデーション

主要ブラウザのベンダープレフィックス

まずは各ブラウザに対応するベンダープレフィックスの一覧。

-webkit- ・・・ Chrome、Safari
-moz- ・・・ Firefox
-ms- ・・・ IE
-o- ・・・ Opera

とりあえず、-webkit- と -moz- 、ベンダープレフィックスなしとを併記という形が良さそうです。

linear-gradient() でグラデーション作成

実際に書く際は、ブラウザそれぞれで先に挙げたベンダープレフィックスが必要になってきます。
尚、IEはバージョン10以降で linear-gradient() に対応しています。

ということで、まずは以下のように。

.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);
}

.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()リファレンス

linear-gradient(グラデーションの向き, 開始色, 途中色, 終了色);

1	linear-gradient(グラデーションの向き, 開始色, 途中色, 終了色);

Androidに対応させる

Android は linear-gradient() に4.0以降で対応していますが、2.* では -webkit-gradient() という独自拡張で対応しているようです。

なので、先ほどのCSSに追加して以下のように。
記述は現行バージョンの書き方よりも先に記述し、最新バージョンでは -webkit-linear-gradient() が優先されるようにします。

.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);
}

.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() リファレンス

-webkit-gradient(linear, 開始位置, 終了位置, from(開始色), color-stop(位置, 途中色), to(終了色));

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以前には非対応）

.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);
}

.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"]

-HTML,CSS
-css, css3, linear-gradient, グラデーション

: 【JS】jQueryとCSSで作る「ハンバーガーメニュー」を少しリニューアルしてみました

以前作成したjQueryとCSSで作る「ハンバーガーメニュー」に少し手を入れて、もうちょっとだけ使えるものにしてみましたのでご紹介したいと思います。

: HTML5のFile APIを使って、複数(の画像)ファイルをサーバにアップロードする方法。

HTML5のFile APIを使うと、複数ファイルのアップロードが簡単に出来るそうなので、試してみました。
対象のブラウザがモダンブラウザに限定されるようなのですが、妙に簡単に出来たのが印象的。

ちなみに、CakePHP2（2.3.6）でも動きました。