My OperaHTML5、CSS3 で作るポラロイド風写真
Monday, December 12, 2011 1:58:34 AM
HTML5 Advent Calendar の12日目です。
本来のAdvent Calendarとは、12月1日からクリスマスの25日まで、カードに作られた窓を1日に1つずつ開けていくというものです。一方、技術系の Advent Calendar は、12月1日から25日までの間、毎日違う人が特定のテーマに沿ってブログ記事を書くというものです。ここでは、「HTML5」がテーマになります。他にも面白い記事が公開される予定ですので興味のある方は是非チェックしてみてください：http://atnd.org/events/21987
1. まずは HTML5
最初にマークアップを用意しましょう。HTML5 ではいくつかの新しい要素があります。どれをどういうふうに使うかは混乱しやすいですが、一つの簡単な要素は <figure> です。画像かビデオに使う要素で、実はそれだけであまり利点がなさそうですが、画像やビデオに説明の文章がある場合、<figcaption> との併用で役立ちます。使い方はこんな感じです：
<!-- HTML ファイル -->
<figure id="polaroid">
<img src="santa.jpg" alt="本物のサンタさん">
<figcaption>Merry Christmas !</figcaption>
</figure><!-- HTML ファイル -->
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->2. 次はポラロイド風に
ポラロイド写真のような効果はもちろん白い紙が必要なので、画像の周りにマージンを追加し、背景を白にします：
/* CSS ファイル */
#polaroid {
background: #fff;
color: #111;
display: block;
height: 425px;
margin: 2em auto;
width: 350px;
}
#polaroid img {
border: solid 1px #ddd;
margin: 24px;
}
#polaroid figcaption {
display: block;
font-size: 32px;
line-height: 1;
text-align: center;
}<figure> や <figcaption> みたいな要素が認識されず、インライン要素として扱われます。そのため、display: block; を指定します。そうすると、IE6 でもポラロイドっぽく見えます。
3. CSS3 で面白く
やっと CSS3 の番になりました。細かい効果を追加するともう少し本格的になります。例えば影の引用、少しの回転、そして角を微妙に丸くしましょう：
/* CSS ファイル */
#polaroid {
box-shadow: 0 2px 4px #777;
border-radius: 3px;
-moz-transform: rotate(5deg);
-ms-transform: rotate(5deg);
-o-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
}4. 一言メッセージをおしゃれに
今のところ、結構完成に近い感じがしますが、画像の下にあるメモはメモらしくないですね。ここでウェブフォントを使いましょう。ウェブフォントを使う時はもちろん利用する許可が必要です。このデモに使うフォントは Jesús Gorriti がコピーライト無しで公開している Gorri Sans です。
ウェブフォントは IE6 を含めてたくさんのブラウザで使うことができますが、ちょっとしたコツが必要です。Paul Irish 氏、Richard Fink 氏や Ethan Dunham 氏が色んな環境でテストして、一つの結果としてはこのコードがあります：
/* CSS ファイル */
@font-face {
/* Font source: http://gorriti.com/2009/02/05/mi-aportacion-al-mundo-brutista/ */
font-family: 'GorriSans';
src: url('GorriSans.eot?') format('eot'), url('GorriSans.woff') format('woff'), url('GorriSans.ttf') format('truetype');
}
#polaroid figcaption {
font-family: GorriSans, arial, sans-serif;
}5. フェードイン効果の追加
いよいよ最後の仕上げになりましたが、それはもちろん写真の現像です。本物のポラロイド写真みたいに、このデモの写真が目の前でゆっくりと現れます。JavaScript を使うことが可能ですが、CSS のみの方法でやってみましょう。アニメーションそのものは簡単であり、画像の透明度にトランジションを利用します。つまり、1分の間、opacity が 0（透明）から 1（不透明）に変わります。
どのトランジションでも、二つ以上の状態が必要です。この場合、ページ自体が第1状態になり、第2状態を作るには target の疑似要素（pseudo-element）を使います。トランジションを起動するには、<body> 要素に「demo」という ID を加え、ページの URL にも「#demo」を追加します。そうすると、ページがロードする時、画像が透明の状態から段々画像が見える target の状態に変わります。
<!-- HTML ファイル -->
<body id="demo">
...
</body>/* CSS ファイル */
#polaroid img {
opacity: 0;
-moz-transition-duration: 60s;
-ms-transition-duration: 60s;
-o-transition-duration: 60s;
-webkit-transition-duration: 60s;
transition-duration: 60s;
}
#demo:target #polaroid img {
opacity: 1;
}
