HTML5 Rocks

HTML5 Rocks

HTML5 機能

プレゼンテーション

CSS3 の導入により、HTML でも優れた外観と機能を備えたサイトやアプリケーションを今までになく簡単に作成できるようになりました。CSS3 には、以下のような新しい技術や拡張機能が数多く採用されています(リンク先はすべて英語): 2D 変形トランジション3D 変形ウェブフォント、 その他多数。

小さな CSS を既存のアプリケーションに適用するだけで、コーディング作業をしなくても、優れたユーザー エクスペリエンスを作り出すことができます。

新機能

Try This!

CSS3 の変形処理を使用すると、あらゆる DOM 要素を単純なスタイルで回転したり、拡大/縮小したり、歪めたり、移動したりすることができます。

pre {
transform: rotate(-1deg) skewX(5deg);
}

トランジションを使用すると、DOM 要素のスタイルを変形する際のアニメーションの方法を指定できます。たとえば、ユーザーが要素にマウスを合わせたときに背景の色をアニメーションで変化させることができます。このコードにマウスを合わせてみてください。

pre {
  transition: all 1s ease-inout;
}

pre:hover {
  background-color: #F2F5FE;
  border-color: black;
}

3D 変形も簡単に適用できます。3 次元の座標軸で変形方向を指定するだけです。こちらのコードにマウスを合わせてください。

div {
  transform: rotate3d(1,1,0, 45deg);
}

デモ

Arcade Fire: The Wilderness Downtown
Snow Stack

活用例

Typekit - Webfonts
CSS3 Maker

リソース