CSS3のbox-shadowで画像を浮かせたような影を表現する方法

Date：2013/09/16 | Category：WordPressテーマのカスタマイズ方法【HTML・CSSの基礎も】

※景品表示法に基づく表記：本記事には商品の広告が含まれています

↑上記↑のような画像がめくれているような影、良く見かけると思います。

さて、今日はこのようなエフェクトを作る、CSS3のbox-shadowプロパティを紹介します。

斜めの影を作っている仕組み

浮かせたような斜めの影ですが、画像の下にシェイプを作って、そこから影を発生させています。

エフェクト用のCSS3ソース

実際のコードは以下のとおりです。コピーペーストしてお使いください。
※下記の.boxshadowは、好きなclass名を付けてください。

◆HTML
<div class=”boxshadow”>
<img src=”画像のパス” alt=”ホゲホゲ” width=”●●●” height=”●●●” />
</div>

◆CSS
.boxshadow {
position: relative;
}
.boxshadow:before, .boxshadow:after {
background: none repeat scroll 0 0 #777777;
bottom: 18px;
box-shadow: 0 18px 10px #777777;
content: “”;
left: 10px;
position: absolute;
top: 75%;
transform: rotate(-4deg);
-webkit-transform: rotate(-4deg);
-moz-transform: rotate(-4deg);
-ms-transform: rotate(-4deg);
-o-transform: rotate(-4deg);
width: 50%;
z-index: 1;
}
.boxshadow:after {
left: auto;
right: 10px;
transform: rotate(4deg);
-webkit-transform: rotate(4deg);
-moz-transform: rotate(4deg);
-ms-transform: rotate(4deg);
-o-transform: rotate(4deg);
}
.boxshadow img{
position: relative;
z-index: 2;
}

Tags