枠の角を丸くする

Glossyでは枠の角の丸みを指定することができます。角の丸みはclass属性にiradiusを付加し直後に20～50までの角丸の割合を指定します。例えば20%であればclass="glossy iradius20"とします。サンプル03では丸みを20%､ 50%に設定した状態で表示しています。

<img src="images/button.gif" class="glossy iradius20">
<img src="images/button.gif" class="glossy iradius50">

サンプル03の実行結果

サンプル03

<!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:white; }
        --></style>
        <script type="text/javascript" src="js/glossy.js"></script>
    </head>
    <body>
    <h1>Glossyサンプル</h1>
    <p>
        <img src="images/button.gif">
        <img src="images/button.gif" class="glossy iradius20">
        <img src="images/button.gif" class="glossy iradius50">
    </p>
    </body>
</html>

Glossyは標準で画像に影が表示されますが、この影を消すことができます。影を消すにはnoshadowを同時に指定します(サンプル04)。

<img src="images/button.gif" class="glossy">
<img src="images/button.gif" class="glossy noshadow">

サンプル04の実行結果

サンプル04

<!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:white; }
        --></style>
        <script type="text/javascript" src="js/glossy.js"></script>
    </head>
    <body>
    <h1>Glossyサンプル</h1>
    <p>
        <img src="images/button.gif">
        <img src="images/button.gif" class="glossy">
        <img src="images/button.gif" class="glossy noshadow">
    </p>
    </body>
</html>