memocarilog

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

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

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

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

CSSのコード

疑似要素を使って.photoboxの前後に架空のボックスを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がサポートされていたらいいですね。