立体枠(ベベル)を指定する

Cornerは角を丸くすると同時に立体枠(ベベル)も指定することができます。立体枠の高さはスタイルシートのishadeで指定し、直後に0~100までの値を付加します。以下のようにすると立体枠が画像に適用され表示されます(サンプル04)。

<img src="images/001.jpg" class="corner ishade50">

サンプル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>Cornerサンプル</title>
        <style type="text/css"><!--
        h1 { color:#33f; }
        body { background-color:white; }
        --></style>
        <script type="text/javascript" src="js/corner.js"></script>
    </head>
    <body>
    <h1>Cornerサンプル</h1>
    <p>
        <img src="images/001.jpg">
        <img src="images/001.jpg" class="corner ishade50">
    </p>
    </body>
</html>

また、Cornerでは画像に影を付けることができます。この影の濃さもスタイルシートishadowで指定できます。ishadowの直後に0~100までの値を付加します。値が大きいほど影が濃くなります(サンプル05)。

 <img src="images/001.jpg" class="corner ishadow40">

サンプル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>Cornerサンプル</title>
        <style type="text/css"><!--
        h1 { color:#33f; }
        body { background-color:white; }
        --></style>
        <script type="text/javascript" src="js/corner.js"></script>
    </head>
    <body>
    <h1>Cornerサンプル</h1>
    <p>
        <img src="images/001.jpg">
        <img src="images/001.jpg" class="corner ishadow40">
    </p>
    </body>
</html>

以下のように立体枠と影の濃さを同時に指定することもできます(サンプル06)。

 <img src="images/001.jpg" class="corner ishadow40 ishade50">

サンプル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>Cornerサンプル</title>
        <style type="text/css"><!--
        h1 { color:#33f; }
        body { background-color:white; }
        --></style>
        <script type="text/javascript" src="js/corner.js"></script>
    </head>
    <body>
    <h1>Cornerサンプル</h1>
    <p>
        <img src="images/001.jpg">
        <img src="images/001.jpg" class="corner ishadow40 ishade50">
    </p>
    </body>
</html>

立体枠は、飛び出すような感じではなく、へこんだ感じにすることもできます。へこんだ感じにするにはスタイルシートでinverseを指定します(サンプル07)。

<img src="images/001.jpg" class="corner ishadow40 inverse">

サンプル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>Cornerサンプル</title>
        <style type="text/css"><!--
        h1 { color:#33f; }
        body { background-color:white; }
        --></style>
        <script type="text/javascript" src="js/corner.js"></script>
    </head>
    <body>
    <h1>Cornerサンプル</h1>
    <p>
        <img src="images/001.jpg">
        <img src="images/001.jpg" class="corner ishadow40 inverse">
    </p>
    </body>
</html>

これまでの設定をまとめて指定することもできます(サンプル08)。

<img src="images/001.jpg" class="corner ishadow40 iradius24 ishade50">
<img src="images/001.jpg" class="corner ishadow40 iradius24 inverse">

サンプル08の実行結果

Cornerはアクセシビリティを損なうことなく手軽に画像を角丸にできる便利なライブラリです。後で角丸のサイズをまとめて調整することもできます。角丸処理が面倒な場合には利用を検討してみてはどうでしょうか。

サンプル08

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>Cornerサンプル</title>
        <style type="text/css"><!--
        h1 { color:#33f; }
        body { background-color:white; }
        --></style>
        <script type="text/javascript" src="js/corner.js"></script>
    </head>
    <body>
    <h1>Cornerサンプル</h1>
    <p>
        <img src="images/001.jpg" class="corner ishadow40 iradius24 ishade50">
        <img src="images/001.jpg" class="corner ishadow40 iradius24 inverse">
    </p>
    </body>
</html>