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

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的な効果を施せる手軽なライブラリです。画像やページにアクセントを追加したい場合などに利用してみてはどうでしょうか。