HTML5 Rocks

HTML5 Rocks

HTML5 Features

Presentation

With the introduction of CSS3 it has never been easier to create rich and beautiful sites and applications in HTML. There are many new technologies and extensions to CSS3 including: 2D Transformations, Transitions, 3D Transforms and WebFonts to name just a few.

You can create rich user experiences with no coding effort required, just simply apply a little CSS to your existing applications.

What’s New

Try This!

CSS3 Transformations allow you to apply rotations, scales, skews and translations to any DOM element with simple styles.

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

Transitions allow you to specify how the style on a DOM element will animate between transformed states. For example, you can animate the background color when the user hovers over an element. Hover over this code!

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

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

Applying 3D transforms is simple too. Just specify the transformation in 3d co-ordinates and you are ready. Hover over this code!

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

Demos

Arcade Fire: The Wilderness Downtown
Snow Stack

In the Wild

Typekit - Webfonts
CSS3 Maker

Resources