【ハウツー】

ゼロからはじめるGlossy - 画像の周りに枠を付けよう

4 グラデーションを表示する

    古籏一浩　 [2007/07/30]
    印刷

    グラデーションを表示する

    Glossyは透過GIFを利用することで単色のグラデーションまたは、任意の2色カラーのグラデーションを表示できます。単色でのグラデーションはclass属性にibgcolorを指定します。ibgcolorの文字の直後にrrggbb形式で赤の輝度、緑の輝度、青の輝度を16進数で指定します。これはHTMLでのカラー指定と同じものです。サンプル05では水色と黄色の単色グラデーションが表示されます。

    <img src="images/trans.gif" class="glossy ibgcolor4088ff ">
<img src="images/trans.gif" class="glossy ibgcolorffff00">

    サンプル05の実行結果

    サンプル05

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>Glossyサンプル</title>
        <style type="text/css"><!--
        h1 { color:#33f; }
        body { background-color:#ddd; }
        --></style>
        <script type="text/javascript" src="js/glossy.js"></script>
    </head>
    <body>
    <h1>Glossyサンプル</h1>
    <p>
        <img src="images/trans.gif" class="glossy ibgcolor4088ff ">
        <img src="images/trans.gif" class="glossy ibgcolorffff00">
    </p>
    </body>
</html>

    2色のグラデーションを表示するにはibgcolorとigradientで色を指定します。igradientもibgcolor同様にrrggbb形式でカラーを指定します(サンプル06)。igradientのみ指定した場合には背景色がないと判断されグレーで表示されます。

    <img src="images/trans.gif" class="glossy ibgcolorffffff igradient0000ff">
<img src="images/trans.gif" class="glossy ibgcolorffff00 igradientff0000">

    サンプル06の実行結果

    サンプル06

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>Glossyサンプル</title>
        <style type="text/css"><!--
        h1 { color:#33f; }
        body { background-color:#ddd; }
        --></style>
        <script type="text/javascript" src="js/glossy.js"></script>
    </head>
    <body>
    <h1>Glossyサンプル</h1>
    <p>
        <img src="images/trans.gif" class="glossy ibgcolorffffff igradient0000ff">
        <img src="images/trans.gif" class="glossy ibgcolorffff00 igradientff0000">
    </p>
    </body>
</html>

    2色グラデーションの場合、グラデーションの方向を指定することができます。標準では縦方向になっていますがhorizontalを指定すると横方向のグラデーションになります(サンプル07)。

    <img src="images/trans.gif" class="glossy ibgcolorffffff igradient0000ff">
<img src="images/trans.gif" class="glossy ibgcolorffffff igradient0000ff horizontal">

    サンプル07の実行結果

    サンプル07

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>Glossyサンプル</title>
        <style type="text/css"><!--
        h1 { color:#33f; }
        body { background-color:#ddd; }
        --></style>
        <script type="text/javascript" src="js/glossy.js"></script>
    </head>
    <body>
    <h1>Glossyサンプル</h1>
    <p>
        <img src="images/trans.gif" class="glossy ibgcolorffffff igradient0000ff">
        <img src="images/trans.gif" class="glossy ibgcolorffffff igradient0000ff horizontal">
    </p>
    </body>
</html>

    Glossyはアクセシビリティを損なうことなくWeb 2.0的な効果を施せる手軽なライブラリです。画像やページにアクセントを追加したい場合などに利用してみてはどうでしょうか。

    無料のスケジュール管理ソフト「アリエル・マルチスケジューラ」v4.8を公開

    ソフトイーサ、「PacketiX Desktop VPN」のベータ2を無償公開

    新着記事

    【レポート】マカフィーの世界の専門家の意識調査「サイバー防衛報告書」とセキュリティソリューション [21:15 5/25]
    アップル、Aperture 3.2.4を公開 - バグ修正、安定性向上など [20:51 5/25]
    【レポート】GTC 2012 - VGXでエンタープライズ環境でのGPU需要開拓を狙うNVIDIA [20:07 5/25]
    デル、期間限定キャンペーンに特価アイテム追加、アップグレード無料も継続 [19:41 5/25]
    上海問屋、iPhoneとほぼ同じ薄さのバッテリ内蔵ヘッドホンアンプ [19:05 5/25]

    特設サイトの情報

      人気記事

      一覧

      もっと見る

      新着記事

      特別企画

      マイナビニュースマガジン

        ページトップ