世界中の１％の人々へ

英文ドキュメントを読みながらHTML完成までたった2時間の簡単さ:D

a要素にスタイルを付与することでマウスアニメーションができる。

いろいろと調べていたら、「24 ways: Going Nuts with CSS Transitions」に解説がありました。ポラロイド写真風のボックスを作ったり、ボックスを回転表示させたり、拡大表示する方法までは理解してましたが、マウスを載せた時のアニメーションがわからず、「どうやって作るんだろうな？」とコードをじっと読んでいたら、「ああ、そうか！」というコツがわかったので、即コードを書きました。コツは簡単、a要素にスタイルを適用しているだけなんです。なれない英文を読みながらでもHTMLの完成までたった2時間でできました。あまりに簡単で物足りなかったのでだったので、text-shadowプロパティでタイトル文字まで作ってしまいましたｗ
もう少し凝ったものを作りたい場合はオリジナルを見てください。
＃このブログを書くほうが時間かかってます:p

• 24 ways: Going Nuts with CSS Transitions
  http://24ways.org/2009/going-nuts-with-css-transitions

以下解説です。

ポラロイド写真風アニメーションの作り方

プラロイド写真風ボックスの作成

まずはポラロイド写真風の基本型を作ってみましょう。まずは基本型を作ります。画像を１点用意してください。例では200×200ピクセルの画像になっています。
※サンプルはHTML5で書いてありますが、HTML5でなければならないという理由はありません。

◇HTML

<div class="album">
  <a href="http://www.dakiny.com/" class="polaroid">
  <img src="img/dakiny-tr.png" alt="Dakiny">Hello! This is Dakiny in Japan.</a>
</div>

a要素にスタイルを設定しておくのが、マウスを載せた時に動作させるための重要なポイントです。

◇CSS

.polaroid {
    width: 200px;
    padding: 13px 13px 26px 13px;
    border: 1px solid #BBBBBB;
    background-color: white;
    -webkit-box-shadow: 2px 2px 3px #AAAAAA;
    -moz-box-shadow: 2px 2px 3px #AAAAAA;
    box-shadow: 2px 2px 3px #AAAAAA;
    font-family: 'Expletus Sans', arial, serif;
    font-size: small;
    color: #E8984F;
    text-align: left;
    }

◇ポイント

罫線、ボックスの影を控えめにしてください。

◇box-shadow

box-shadowプロパティはボックスに影をつけた表示のできるプロパティです。左からX軸、Y軸、ぼかし具合、影の色となっています。text-shadowプロパティも同様に設定します。上下の設定をすることもできます。下記はサンプルで用いたh1要素の設定例です。

text-shadow: 0px 2px 1px #fff,0 -1px 1px #000;

ボックスを回転させる

続いてボックスを右に10度回転させてみましょう。ボックスを回転した表示を行う場合はtransform: rotateを使います。CSSに下記のコードを追加してください。

◇CSS追加コード

  -webkit-transform: rotate(10deg) scale(1.0);
  -moz-transform: rotate(10deg) scale(1.0);
  -o-transform: rotate(10deg) scale(1.0);
  transform: rotate(10deg) scale(1.0);

◇transformeプロパティ

tranceformeプロパティは要素の変形にもちいるプロパティです。rotate属性をつければ要素を回転表示させることができます。値は正数であれば右に、負数であれば左に要素を回転表示させます。scale属性をつければ要素を拡大縮小表示させることができます。値には比率を入れてください。

アニメーションを加える

オンマウスの表示を作ってみましょう。下記コードを加えることにより、ボックスにマウスがのったときに、ボックスが左回転、拡大、浮き上がった表示になります。

◇CSS追加コード

a.polaroid:hover,
a.polaroid:focus,
a.polaroid:active {
    z-index: 2;
    border-color: #6A6A6A;
    -webkit-box-shadow: 2px 2px #999999;
    -moz-box-shadow: 2px 2px 4px #999999;
    box-shadow: 2px 2px 4px #999999;
    -webkit-transform: rotate(-10deg) scale(1.2);
    -moz-transform: rotate(-10deg) scale(1.2);
    -o-transform: rotate(-10deg) scale(1.2);
    transform: rotate(-10deg) scale(1.2);
    }

◇ポイント

浮き上がらせるコツは影を大胆につけることです。
z-indexの値は1以外ならなんでもいいです。

完成！遊んでみましょう

以上で完成です。すごく簡単ですね。今までならば画像を2点作成して、JavaScreiptを使わなければできなかったことすが、画像があれば、HTML+CSS3だけでできるようになりました。画像と違って影の調整やボックスの数値の変更は簡単です。ぜひチャレンジしてみてください。
ただし、残念ながら40%近くのシェアのあるIE6-IE8では利用できません。IE8が消えるまで待てませんので、早くIE7やIE8で対応してくれるスクリプトが公開されるといいなと心より願っています。

• CSS3で作るポラロイド風アニメーションサンプル
  http://hippos.jp/css3/transform.html
• 24 ways: Going Nuts with CSS Transitions
  http://24ways.org/2009/going-nuts-with-css

「CSS3デザイン・プロフェッショナルガイド」5月末発売予定。

最後に宣伝。今月末にマイコミから「CSS3デザイン・プロフェッショナルガイド」が出ます。ピクセルグリッドの小山田晃浩さん、外村和仁さんや秋葉秀樹さんたちとの共著です。僕が担当したのは1章の「Chapter1 CSSの基本」と「Appindex」で、野球でいえば1番と下位打線。3番、4番、5番にあたる主砲である、Chpter2はピクセルグリッドの二人が、Chapter3は秋葉秀樹さん、とみたちひろさん、宮澤了祐さんが書いてます。CSSの基本がわかる人が読めば理解できるように描かれており、実践向きでわかりやすい本ですが、W3Cに忠実かつ高度なCSS3の技術が学べる半端なくすごい本になります。マジに期待してください。5月28日土曜日に出版記念セミナーもやります。少しだけ席余ってますので早めにどうぞ。