画像を使わずにCSS3で紙がカールしたような効果を表現する

画像を使わずにCSS3で紙がカールしたような効果を表現する

よくみかける紙がカールしたように見える効果を、画像を使わずにcss3で表現する方法です。CSS3や疑似要素をサポートしていないブラウザ(IE7以下等)では再現できません。

How to Create CSS3 Paper Curls Without Imagesでコードが公開されています。
How to Create CSS3 Paper Curls Without Images

実際に使ってみた”demo”です。

使ってみたdemoのコードは以下です。

CSSのコード

疑似要素を使って.photoboxの前後に架空のボックスを2つ作ります。そのボックス2つをpositionで配置し”z-index: -1;”で背面に回して、transformプロバティを使いボックスを斜めにして下のグラデーションの部分をだしています。How to Create CSS3 Paper Curls Without Imagesでも解説されていますが、↓こんな感じですね。
シャドウの配置図

.photo_wrap{
  width: 600px;
  display: block;
  margin: 0 auto;
  position: relative;
  padding: 20px;
  margin: 0 auto;
  background-color: #fff;
  border: solid 1px #eee;
}
.photo_wrap:before, .photo_wrap:after{
  position: absolute;
  width: 40%;
  height: 10px;
  content: '';
  left: 12px;
  bottom: 12px;
  background: transparent;
  -webkit-transform: skew(-5deg) rotate(-5deg);
  -moz-transform: skew(-5deg) rotate(-5deg);
  -ms-transform: skew(-5deg) rotate(-5deg);
  -o-transform: skew(-5deg) rotate(-5deg);
  transform: skew(-5deg) rotate(-5deg);
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  z-index: -1;
}
.photo_wrap:after{
  left: auto;
  right: 12px;
  -webkit-transform: skew(5deg) rotate(5deg);
  -moz-transform: skew(5deg) rotate(5deg);
  -ms-transform: skew(5deg) rotate(5deg);
  -o-transform: skew(5deg) rotate(5deg);
  transform: skew(5deg) rotate(5deg);
}

HTMLのコードです

<div class="content">
 <div class="photo_wrap"><img class="photo" src="images/p01.jpg"></div>
</div>

画像を使わずに複雑な効果を再現できます。
IEでももっとCSS3がサポートされていたらいいですね。

Related Article

No Comments & Tracbacks

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー トラブル コードサンプル スライドショー コンテンツ 素材 jQueryプラグイン Facebook php 引っ越し お知らせ JavaScript CSS カテゴリー Shareボタン IE 投稿タイプ seo Photoshop HTML5 レスポンシブ サイドバー ナビゲーション タクソノミー WPセキュリティ Git カスタムメニュー Macアプリ PHPリファレンス SVG query_posts API WP使い方 iTunes データベース コメント function RSS 条件分岐 get_posts() スマートフォン Sass/Compass マルチサイト機能