SAMPLE

サンプルはこちら.

これでほぼ完成!!

CODE

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

/**
 *     footer
 */
#footer {
    min-height:300px;
    padding-top: 10px;
    background: rgb(0, 68, 204);
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 1.0) 100%), rgb(0, 68, 204);
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 1.0) 100%), rgb(0, 68, 204);
    background: -o-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 1.0) 100%), rgb(0, 68, 204);
    background: linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 1.0) 100%), rgb(0, 68, 204);
    box-shadow: 0px 0px 8px 0px #555;
    
    color: white;
    text-align: center;
}

#footer .footer-links ul,
#footer .footer-links ol
{
    display: -webkit-box;
    display: -moz-box;
    display: -o-box;
    display: box;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -o-box-pack: center;
    box-pack: center;
    list-style: none;
}

#footer .footer-links ul li
{
    text-align: center;
    padding: 0px 10px;
}

#footer .footer-links ul li:not(:last-child),
#footer .footer-links ol li:not(:last-child)
{
    border-right: 1px solid white;
}

#footer a {
    color: white;
}

POINT

はいキタ! お馴染みグラデーション!

ヘッダでは円形グラデーションを使用しましたが, こちらでは線形グラデーションを使用しています. 青っぽい色の上に白のグラデーションを重ねています.

background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 1.0) 100%), rgb(0, 68, 204);
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 1.0) 100%), rgb(0, 68, 204);
background: -o-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 1.0) 100%), rgb(0, 68, 204);
background: linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 1.0) 100%), rgb(0, 68, 204);

こちらもお馴染み フレキシブルレイアウト

詳しい説明は必要ありませんね. なんだったっけ？って方はこちらへ.

display: -webkit-box;
display: -moz-box;
display: -o-box;
display: box;
-webkit-box-pack: center;
-moz-box-pack: center;
-o-box-pack: center;
box-pack: center;

not 擬似クラスを使って最後以外の要素にスタイルを適応

ちょっとした小技です. :not(last-child) と指定することで, 最後以外の要素にスタイルを適応することができます.

#footer .footer-links ul li:not(:last-child),
#footer .footer-links ol li:not(:last-child)
{
    border-right: 1px solid white;
}