Gradient CSS Generator

画像不要なグラデーションCSSを生成します

設定

プレビュー

概要

画像ファイルを使用せずCSSの定義のみでグラデーションを可能にするCSSコードを生成します。 開始色、終了色、高さを入力し生成ボタンを押すとCSSのコードが出力され、グラデーションのプレビューが表示されますので、 CSSコードをそのままコピペしてご使用ください。

使い道としては、このページのように背景色として使用する以外にもこんな風に みたいにすることもできますので、 ボタンやテーブルヘッダ等のパーツに適用してもいいかもしれません。以下がサンプルのコードです。 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
    <head>
        <style>
        input.text{border:solid 1px #ccc;}
        input.text,
/*↓　これが生成されます*/
        .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;
        }
/*↑　これが生成されます*/
        </style>
    </head>
    <body>

        <input class="text" value="Ext.jsの入力フィールド"/>      
    </body>
</html>

動作条件

このツールの動作条件ですが、なるべくFirefoxかOperaでご使用ください。 と言うのはIEやSafariで生成されたCSSコードだとIEのみでしかグラデーションがかからないためです。 （FirefoxやOperaで生成されたコードであれば、IEやSafariでもグラデーションはかかります。） ちなみにSafariで生成する際はグラデーションのプレビューも表示されません。

inserted by FC2 system