CSSグラデーションのあれこれ

ブラウザによって異なる挙動をするCSSグラデーション。特にInternet Explorerでの指定が面倒だったので忘れないようにメモ…_φ(･_･。

Webkit系

主なブラウザとしては「Safari」、「Google Chrome」。
その他、「Wii U」や「PlayStation 4」にも使われているようです。
サンプル

background-image: -webkit-gradient(
              linear
            , left top
            , left bottom
            , from(#192f60)
            , color-stop(0.49, #4c6cb3)
            , to(#192f60));

書式としては

-webkit-gradient(linear, 開始位置, 終了位置, 開始色, [途中色[位置,色]], 終了色);
Mozilla系

主なブラウザとしては「Firefox」。
サンプル

background-image: -moz-linear-gradient(
              top
            , #192f60 0%
            , #4c6cb3 49%
            , #192f60);

書式としては

-moz-gradient(方向, 開始色, [途中色[色,位置]], 終了色);
Microsoft系

主なブラウザとしては「Internet Explorer」。
書式がバージョンによって異なる。

background-image: -ms-linear-gradient(
              top
            , #192f60 0%
            , #4c6cb3 49%
            , #192f60);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#192f60', endColorstr='#4c6cb3', GradientType=0)";

「Internet Explorer 10」以降

-ms-gradient(方向, 開始色, [途中色[色,位置]], 終了色);

「Internet Explorer 9」以前のブラウザは3色以上のグラーデーションは使えないようです。

/*「Internet Explorer 8、9」*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='開始色', endColorstr='終了色', GradientType=グラデーションのタイプ)";
/*参考までに「Internet Explorer 5.5」〜「Internet Explorer 7」*/
filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='開始色', endColorstr='終了色', GradientType=グラデーションのタイプ)";

まとめて記述するとこんな感じ

background-image: -webkit-gradient(
              linear
            , left top
            , left bottom
            , from(#192f60)
            , color-stop(0.49, #4c6cb3)
            , to(#192f60));
background-image: -moz-linear-gradient(
              top
            , #192f60 0%
            , #4c6cb3 49%
            , #192f60);
background-image: -ms-linear-gradient(
              top
            , #192f60 0%
            , #4c6cb3 49%
            , #192f60);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#192f60', endColorstr='#4c6cb3', GradientType=0)";

これは流石にコピペじゃないと無理ですね…(-｡-;。

自己紹介

松田 大と申しますm(_ _)m
インディーズでミュージシャンをやっていたのですがいつのまにか...

とある企業でショップのアルバイトスタッフから正社員、支店長を経てシステム部門に異動するという、開発担当としては変わった経緯を持っている方だと思います。

「Excel VBA」からスタートして、Yamaha RTX シリーズで VPN環境構築、Hyper-V環境構築、Windowsアプリ開発などを経験した後、「 WordPress 」に出会い、どっぷりハマっています(^_^)。

現在勤めているJTクラウドシステムでは、「 WordPress 」を活用したWEBサイト、業務用WEBアプリケーション開発を中心に、記事の執筆代行や掲載に必要な情報のリサーチ、映像のテロップ入れや切りはりなどの簡単な動画編集なども、まとめて行なっています。

現在、代表取締役兼二児のパパ。イクメン目指して、公私ともに慌ただしくしています（笑）
お問い合わせ

コメントを残す