HTML5 Rocks

HTML5 Rocks

HTML5 Características

Presentación

Con la introducción de CSS3, nunca ha sido tan fácil crear aplicaciones y sitios tan atractivos y completos en HTML. Hay una gran cantidad de extensiones y tecnologías nuevas para CSS3, entre las que se incluyen las transformaciones en 2D, las transiciones, las transformaciones en 3D y las fuentes web.

Puedes crear experiencias de usuario completas ahorrándote esfuerzos de programación: solo tienes que aplicar un poco de CSS a tus aplicaciones.

Novedades

Try This!

Las transformaciones CSS3 te permiten aplicar rotaciones, escalas, ángulos y desplazamientos a cualquier elemento DOM con estilos sencillos.

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

Las transiciones te permiten especificar la forma en la que se animará el estilo de un elemento DOM entre los estados transformados. Por ejemplo, puedes animar el color de fondo cuando el usuario coloque el cursor sobre un elemento. Coloca el cursor sobre este código.

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

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

Aplicar transformaciones en 3D también es muy fácil: solo tienes que especificar las coordenadas de la transformación en 3D y listo. ¡Coloca el cursor sobre este código!

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

Demostraciones

Arcade Fire: The Wilderness Downtown
Snow Stack

En estado puro

Typekit - Webfonts
CSS3 Maker

Recursos