[CSS]ユーザーの操作に合わせて価格表の一部を拡大するCSS3のテクニック

サイト構築 -CSS

Post on:2011年11月28日

sponsorsr

ユーザーのマウスホバーに合わせて、価格表のセルをアニメーションで拡大するCSS3のテクニックを紹介します。

How To Build A Pricing Table With CSS3 Animation

[ad#ad-2]

価格表のセルを拡大するデモ
実装
PSD素材

価格表のセルを拡大するデモ

デモはCSS3対応ブラウザ、Chrome, Safari, Firefoxでご覧ください。

デモページ

ホバーしたセルが拡大表示され、ボックスシャドウを使って浮き上がる感じです。
カラーを変更してもよさそうです。

実装

HTML

価格表は実はtable要素を使っておらず、リスト要素で実装されています。

<div class="pricing_table">
        <ul>
            <li>Standard</li>
            <li>&pound;20</li>
            <li>Perfect for those getting started with our app.</li>
            <li>15 Projects</li>
            <li>5GB Storage</li>
            <li>Unlimited Users</li>
            <li>No Time Tracking</li>
            <li>Enchaned Security</li>
            <li></li>
            <li><a href="" class="buy_now">Buy Now</a></li>
        </ul>
        ...
        ...
</div>

[ad#ad-2]

CSS: テーブルの枠

CSSは実装のポイントとなる箇所を紹介します。
まずは、テーブル全体のアウトラインをスタイルします。ここでは角丸を使っています。

.pricing_table {
    border:1px solid #c4cbcc;
    border-radius:4px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    outline:7px solid #f2f3f3;
    float:left;
}

CSS: テーブルのカラム

次にテーブルのカラムを作ります。
最初にリストスタイルを取り除き、ul要素をフロートで配置します。

.pricing_table ul {
    list-style:none;
    float:left;
    width:147px;
    margin:0;
    border:1px solid #f2f3f3;
    padding:5px;
    text-align:center;
    background-color:#FFF;
}

CSS: ホバー時のエフェクト

ホバー時に、scaleを使って110%に拡大し、ボックスシャドウを適用します。
カーソルを「pointer」にするのを忘れないでください。

.pricing_table ul:hover {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -moz-box-shadow:3px 5px 7px rgba(0,0,0,.7);
    -webkit-box-shadow: 3px 5px 7px rgba(0,0,0,.7);
    box-shadow:3px 5px 7px rgba(0,0,0,.7);
    cursor:pointer;
}