SAMPLE

サンプルはこちら.

ここはかなり着飾ります.

CODE

これを style.css に追加します.

#side {
    padding: 10px;
    width: 300px;
    
    border-right: 1px solid #ccc;
}

#side .side-box {
    margin: 10px 5px 25px;
    border-radius: 10px 0px;
    box-shadow: 0px 0px 8px 0px #aaa;
    
    -webkit-transition: 250ms;
    -moz-transition: 250ms;
    -o-transition: 250ms;
    -ms-transition: 250ms;
    transition: 250ms;
}

#side .side-box:hover
{
    box-shadow: 0px 0px 16px 2px #aaf;
}

#side .side-box h1 {
    padding: 5px 15px;
    background-color: #0066FF;
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.1) 51%, rgba(255, 255, 255, 0.2) 100%), #0066FF;
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.1) 51%, rgba(255, 255, 255, 0.2) 100%), #0066FF;
    background: -o-linear-gradient(top, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.1) 51%, rgba(255, 255, 255, 0.2) 100%), #0066FF;
    background: linear-gradient(top, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.1) 51%, rgba(255, 255, 255, 0.2) 100%), #0066FF;
    border-radius: 10px 0px 0px 0px;
    
    color: white;
    font-size: 15px;
}

#side .side-box .contents
{
    padding: 10px;
}

#side .side-box .contents ul,
#side .side-box .contents ol
{
    list-style: none;
}

#side .side-box .contents li
{
    margin: 4px 0px;
    border-bottom: 1px dashed #aaa;
}

POINT

角丸にして画像感を演出

左上のみを角丸にしています.

border-radius: 10px 0px;

ボーダーを使わずボックスシャドウでラインを表現

オフセットは 0 とし 8px のぼかしを入れることでボックスを囲うように影が表示されます.

box-shadow: 0px 0px 8px 0px #aaa;

トランジションでホバーアニメーション

transition プロパティに数値を設定し, hover時のプロパティを設定することで 簡単にアニメーションさせることができます. ちなみに数値に設定している 250ms は 250ミリ秒だということです.

#side .side-box {
    margin: 10px 5px 25px;
    border-radius: 10px 0px;
    box-shadow: 0px 0px 8px 0px #aaa;
    
    -webkit-transition: 250ms;
    -moz-transition: 250ms;
    -o-transition: 250ms;
    -ms-transition: 250ms;
    transition: 250ms;
}

#side .side-box:hover
{
    box-shadow: 0px 0px 16px 2px #aaf;
}

グラデーションで光感を!!

上から真ん中まで, 真ん中から下までを区切りをつけつつグラデーションさせることで光があたったような演出にすることができます. iPhone が多用しているやつですね.

background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.1) 51%, rgba(255, 255, 255, 0.2) 100%), #0066FF;
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.1) 51%, rgba(255, 255, 255, 0.2) 100%), #0066FF;
background: -o-linear-gradient(top, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.1) 51%, rgba(255, 255, 255, 0.2) 100%), #0066FF;
background: linear-gradient(top, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.1) 51%, rgba(255, 255, 255, 0.2) 100%), #0066FF;