画像ファイルを使わないグラデーションCSSをIE用に微調整してみる

CSS

グラデーション範囲をIE用に微調整

前回のエントリで画像ファイルなしでグラデーションを可能にするCSS生成ツールを紹介しましたが、グラデーションを適用する要素の条件によりIEとその他のブラウザで、グラデーションのかかり方に差異が生じます。具体的には以下のような感じです。

原因はCSSの定義をみると分かりますが、IE用に適用されるfilter属性ではグラデーションを適用する大きさ（範囲）が指定できません。そのためグラデーションを適用する要素全体に対しグラデーションがかかるので、ページの背景などのように縦方向に大きくサイズが伸びる要素に適用すると、グラデーション範囲も伸びてしまいます。

filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#5588ff,EndColorStr=#ffffff);

一方その他のモダンブラウザの場合、ツールで指定されたサイズのグラデーションイメージを要素に貼り付けるので指定サイズの範囲でしかグラデーションはかかりません。

background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABkCAYAAABHLFpgAAAAP0lEQVQYlWMI7fj/n4mRkYGBiQlOIHGZULkIJUwk6ECTRRfDYh6SEiJ1oDsSpzNIdzhei0gKCCJ0YLWDukEHAGMABL+MSJMfAAAAAElFTkSuQmCC");

IEでも他のブラウザのように正確にグラデーションを表現したい場合は、グラデーション終了色のみを適用したベース要素に対し、規定サイズのグラデーション要素とコンテンツ要素を重ね合わせることで擬似的に再現することができます。イメージ的にはこんな感じです。

以下がサンプルソースです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <style>
            /* adjust gradient */
            div.virtual-gradient,
            div.gradient{
                width:200px;
            }
            div.virtual-gradient{
                background-color:#aaccff;
            }
            div.virtual-gradient div.gradient{
                height:100px;
                margin-bottom:-100px;
            }
            div.gradient,
            .background_336699_aaccff_h100{
                filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#336699,EndColorStr=#aaccff);
                background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABkCAYAAABHLFpgAAABrUlEQVQYlS3EV08TAACF0e8/OeKKK8644gquuKIMWQJWpoDVWrFiBWS0lLZ00bK3TdM0yB7uvfc2hBDjHtcXz8NhRrxNzEywi1mJtWJ2kkPMOVQn5iY7xbwUl5if6hYL0urFwnSPWHTYKxZn+MSSTL9YmhUQy440iOWGoFhxNCRWZjeKVTlNYnVus1iT1yLW5reKdQVtYv2xdrGhsENsLOoUm4q7xObj3WKLsUdsPdEr4kxhsc0UFtvNEbHDHBE7S6JiV0lU7LbExB5LTOwt7RP7zl0S+6394sD5AXGwbFDElw+JhIphkXhhRCRVjorkqjGRUj0uUmsmRJrtski3XxEZtVdFpuOayKq7LgzOG8Lguimy3bdETv1tkeu5I/K8d0W+754o8N8XhYEHoqjhoSgOPhLG0GNhbHwiTjY9FabmZ+JUy3Nhbn0hTre9FGfaXwlLx2txtvONKO16K6zd74S1570o6/0gyi9+FBXhT6IyMimqIpOiOjolaqJTwhabFvbYtHD0ff6fs/+LcA18Fe7Bb8Iz9F14h38I38hP4R/9JQJjv0Vw/I8ITfzVP/AsGXELEBJTAAAAAElFTkSuQmCC");
                background-repeat:repeat-x;
                background-color:#aaccff;
            }
            /* for display */
            body{
                color:#eee;
            }
            #normarl-gradient{
                float:left;
                margin-right:10px;
            }
            #virtual-gradient{
                float:left;
            }
        </style>
    </head>
    <body>
        <div id="normarl-gradient" class="gradient">
            normarl gradient<br/>
            normarl gradient<br/>
            normarl gradient<br/>
            normarl gradient<br/>
            normarl gradient<br/>
            normarl gradient<br/>
            normarl gradient<br/>
            normarl gradient<br/>
            normarl gradient<br/>
            normarl gradient<br/>
            normarl gradient<br/>
            normarl gradient<br/>
            normarl gradient<br/>
            normarl gradient<br/>
            normarl gradient<br/>
            normarl gradient<br/>
            normarl gradient<br/>
            normarl gradient<br/>
            normarl gradient<br/>
            normarl gradient<br/>
        </div>
        <div id="virtual-gradient" class="virtual-gradient">
            <div class="gradient"></div>
            virtual gradient for ie<br/>
            virtual gradient for ie<br/>
            virtual gradient for ie<br/>
            virtual gradient for ie<br/>
            virtual gradient for ie<br/>
            virtual gradient for ie<br/>
            virtual gradient for ie<br/>
            virtual gradient for ie<br/>
            virtual gradient for ie<br/>
            virtual gradient for ie<br/>
            virtual gradient for ie<br/>
            virtual gradient for ie<br/>
            virtual gradient for ie<br/>
            virtual gradient for ie<br/>
            virtual gradient for ie<br/>
            virtual gradient for ie<br/>
            virtual gradient for ie<br/>
            virtual gradient for ie<br/>
            virtual gradient for ie<br/>
            virtual gradient for ie<br/>
        </div>
    </body>
</html>

IEでの画面キャプチャです。

サンプルページ(IEで見てください)

その他の注意事項

はてなダイアリーでは使用不可

残念ですが、はてなダイアリーではグラデーションはIEにしか適用されません。原因はCSSの定義が以下のように変換されてしまうためです。

background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABkCAYAAABHLFpgAAAAP0lEQVQYlWMI7fj/n4mRkYGBiQlOIHGZULkIJUwk6ECTRRfDYh6SEiJ1oDsSpzNIdzhei0gKCCJ0YLWDukEHAGMABL+MSJMfAAAAAElFTkSuQmCC");

っていう定義が、

background-image:url("");base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABkCAYAAABHLFpgAAAAP0lEQVQYlWMI7fj/n4mRkYGBiQlOIHGZULkIJUwk6ECTRRfDYh6SEiJ1oDsSpzNIdzhei0gKCCJ0YLWDukEHAGMABL+MSJMfAAAAAElFTkSuQmCC");

という風になってしまいます。...残念です...

IEの場合サイズ指定が必要

IEの場合グラデーションを適用する要素にwidth又はheight等のサイズ指定が必要になります。例えばページ背景に適用するのであれば

html{
     width:100%;
}
html,
.background_eeeeee_ffffff_h10{
    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#eeeeee,EndColorStr=#ffffff);
    background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAKCAYAAAB10jRKAAAAGklEQVQImWN49+7dfyZGRkYGJiYmJiiBlwsAuYQECWLDWdMAAAAASUVORK5CYII=");
    background-repeat:repeat-x;
    background-color:#ffffff;
}

のようにする必要があります。