CSSだけでAppleっぽい影を落として柔らかい立体感を出す方法

画像を使わずにAppleの公式サイトで使われてるような柔らかい影を作る方法です。

上部赤いPLAYボタンで動作サンプルを見れます。

ポイント

ポイントは、本来のボックスと違う形の影を作るために擬似要素を加えて影をつけているところ。その擬似要素を border-radius で丸くすることで柔らかい影にしています。

#!css
.box {
    margin: 1em auto;
    width: 60%;
    padding: 3em;
    border: 1px solid #cacaca;
    text-align:center;
    position: relative;
    background: #ffffff;
}
.box:after {
    z-index: -1;
    position: absolute;
    content: "";
    overflow:hidden;

/**
 *  top と bottomの差が擬似要素の高さになる
 *  下から2%のところから影が始まります。
**/
    top: 95%;
    bottom: 2%;

/* 影の横幅 */
    width: 68%;

/**
 *  影をセンター寄せ
 *  （ (親要素横幅 - 擬似要素横幅) / 2 ）
**/
    left: 16%;

/* 背景をつけないと真ん中が透明になる */
    background: rgba(0, 0, 0, 0.2);

/* 影の濃さは適当に */
    -webkit-box-shadow: 0 1px 13px rgba(0, 0, 0, 0.8);
    -moz-box-shadow: 0 1px 13px rgba(0, 0, 0, 0.8);
    box-shadow: 0 1px 13px rgba(0, 0, 0, 0.8);

/* 影に丸みをつける */
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    -o-border-radius:50%;
    border-radius:50%;
}