【ハウツー】ゼロからはじめるCorner - Cornerではじめる画像エフェクト (3) 立体枠(ベベル)を指定する | パソコン

お知らせ: 「マイポ」からのポイント交換を再開いたしました。(5月9日); メール会員100万人突破記念「春の読者プレゼント」結果発表は5月30日です。; マイナビベアがミクシィで部屋を作ったよ。ぜひ見てね！; 一緒に「マイナビ」で働きませんか。採用情報はこちらから。; 旅行券3万円、時計、ビジネスバッグなどが当たる！さらに応募者全員に50マイポもプレゼント

その先を伝える総合情報サイト
マイナビニュース

パソコン

急上昇ワード

[

]

【ハウツー】

ゼロからはじめるCorner - Cornerではじめる画像エフェクト

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

古籏一浩　 [2007/08/01]

印刷

先頭
前へ
- 1
- 2
- 3
- ／3

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

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>