色やめくれ具合や影を変えてみる

Curl.jsでは、いくつかのオプションを指定することができます。オプションは、めくれ具合の指定、裏側の色、影の濃さを指定することができます。いずれも<img>タグのclass属性に記述し、複数のオプションを指定する場合は半角空白で区切って列記します。画像の右下のめくれ具合(カール度合い)を指定するにはisizeの後に0から100までの値を指定します(サンプル02)。

めくれ具合の指定

サンプル02

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <link rel="stylesheet" href="css/main.css" type="text/css" media="all" />
        <script type="text/javascript" src="js/curl.js"></script>
        <title>curl.jsサンプル</title>
    </head>
    <body>
    <h1>curl.jsサンプル</h1>
        <div>
            <img src="photo/001.jpg" class="curl isize10" width="192" height="108" alt="富士山">
            <img src="photo/001.jpg" class="curl isize20" width="192" height="108" alt="富士山">
            <img src="photo/001.jpg" class="curl isize30" width="192" height="108" alt="富士山">
            <img src="photo/001.jpg" class="curl isize50" width="192" height="108" alt="富士山">
            <img src="photo/001.jpg" class="curl isize75" width="192" height="108" alt="富士山">
            <img src="photo/001.jpg" class="curl isize100" width="192" height="108" alt="富士山">
        </div>
    </body>
 </html>

右下でめくれた部分の色を指定するにはicolorを使います。icolorの後にHTMLで指定されるrrggbb形式のカラーコードを指定します。赤であればicolorFF0000、青であればicolor0000FFとします。カラーコードの16進数値のA～Fの文字は大文字でも小文字でも構いません(サンプル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">
        <link rel="stylesheet" href="css/main.css" type="text/css" media="all" />
        <script type="text/javascript" src="js/curl.js"></script>
        <title>curl.jsサンプル</title>
    </head>
    <body>
    <h1>curl.jsサンプル</h1>
        <div>
            <img src="photo/001.jpg" class="curl icolor000000" width="192" height="108" alt="富士山">
            <img src="photo/002.jpg" class="curl icolorff0000" width="192" height="108" alt="夕暮れ">
            <img src="photo/003.jpg" class="curl icolor00ff00" width="192" height="108" alt="富山湾">
            <img src="photo/004.jpg" class="curl icolor0000ff" width="192" height="108" alt="白糸の滝">
        </div>
    </body>
 </html>