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)";

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

応援よろしくお願いします。
いいね ! してもらえると嬉しいです。

Twitter で

自己紹介

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

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

現在勤めているJTクラウドシステムでは、「 WordPress 」を活用したWEBサイト、業務用WEBアプリケーション開発「 Excel VBA 」を活用した効率化ツールの開発を中心に「 ネットワーク・サーバー構築 」や「 Office365製品の導入支援 」、最近は、ホームページ制作に加え、記事の執筆代行や掲載に必要な情報のリサーチ、映像のテロップ入れや切りはりなどの簡単な動画編集なども、まとめて行なっています。

今年7月、代表取締役に選任され、8月に第一子が誕生、公私ともに慌ただしくしています(笑)

お問い合わせはJTクラウドシステムホームページからお願いします。
スポンサーリンク