CSS3のbox-shadowで画像がめくれた様な影を!

boxshadow

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

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

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

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

boxshadow

エフェクト用の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;
}

人気の無料メール講座を、ご利用ください。

  • 【プロ直伝】制作前に必ず行う2つのこととは?
  • 【重要】収益サイト制作者が取るべき手段は何か?
  • 【発表】魅せるデザインのラインナップはこちらです。
  • 【無料】必ず入れておくべき、フリープラグイン8選!
  • 【一瞬】瞬時にサイトの印象を引き立てる方法。
  • 【3.5倍】こうして成約率が急上昇しました。
  • 【注意】なぜ記事を増やしてもアクセスが伸びないのか?

※下記のフォームからメール講座に ご登録いただけます。

記事をシェアする

  • Tweetする
  • FaceBookでシェアする
  • はてブにBookmarkする
  • Google+で共有する

Tags


Trackbacks & Comments

Trackback URL for this post:

Leave a Reply