/blog

CSS3 の box-shadow の inset と transform の rotate を使って、
Photoshop でつくったポラロイド風の写真の枠を CSS のみで再現してみます。

ボックスの内側にシャドウをつける方法は、こちらの記事を参考にしました。

• CSS Box-Shadow:Inset | Trent Walton

CSS3 版のスクリーンショット

html

<div id="photo01" class="photoframe">
  <p class="photo"><img src="photo01.jpg" alt="photo01" /></p>
</div>
<div id="photo02" class="photoframe">
  <p class="photo"><img src="photo02.jpg" alt="photo02" /></p>
</div>

css

.photoframe {
  position: relative;
  display: inline;
  float: left;
  width: 220px;
  height: 270px;
  overflow: hidden;
  margin: 0 10px 20px;
  padding: 15px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.3);
  text-align: center;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  -moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.5);
  -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.5);
  box-shadow: 0px 2px 4px rgba(0,0,0,0.5);
  z-index: 1;
}
.photoframe .photo {
  width: 220px;
  height: 220px;
  overflow: hidden;
  margin: 0 0 15px;
  padding: 0;
  -moz-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
}
.photoframe img {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  z-index: -1;
}
#photo02 {
  -moz-transform: rotate(-1deg);
  -webkit-transform: rotate(-1deg);
}

要 CSS3 対応ブラウザ。