【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, グラデーション

: 【CSS】縦幅サイズがわからない要素の縦中央にテキストを配置する方法

heightがわからないボックスの中にテキストを縦方向中央に配置する方法を備忘録としてポストします。

: HTML5+CSS3で構築する際のIE9以下への対策

システムを作成する際の確認する人のポリシー(？)でIEのバージョンが8という困ったことになったので、これはいい機会だと捉え、HTML5+CSS3対策の実験台となってもらいましたｗ

: 【CSS】擬似要素を使って選択済みラジオボタンの背景色を変更する方法

以前ラジオボタンの背景色を制御するスクリプトをjQueryで作成したのですが、ラジオボタンを大量に設置するとブラウザが反応しないという事態に陥ったので、CSSの疑似要素を使って制御する方法を紹介します。

: SVGファイルをIllustratorで簡単に作成し、HTML5で表示する方法

最近、ロゴに「.svg」となったファイルを使うサイトが増えていているような気がします。
.svgとはなんなのかよく知らなかったので調査し、実際にブラウザで表示させることが出来るようになったので、備忘録としてポストしてみたいと思います。