HTML5 Rocks

HTML5 Rocks

HTML5 Fonctionnalités

Présentation

Grâce à l'arrivée du CSS3, la création de sites et d'applications HTML riches n'a jamais été aussi facile. Il existe de nombreuses technologies complémentaires et extensions au CSS3 : transformations 2D, transitions, transformations 3D et polices Web, pour n'en citer que quelques-unes.

Vous pouvez créer des applications avec un grand confort d'utilisation, et ce, sans efforts de codage particuliers. Il vous suffit d'utiliser un peu de CSS et le tour est joué !

Nouveautés

Try This!

Les transformations CSS3 vous permettent d'appliquer des rotations, des mises à l'échelle, des inclinaisons et des translations sur n'importe quel élément DOM à l'aide de styles simples.

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

Les transitions vous permettent de définir la manière dont le style d'un élément DOM doit s'animer lors du passage d'un état transformé à un autre. Vous pouvez, par exemple, animer la couleur d'arrière-plan lorsqu'un utilisateur passe la souris sur un élément. Passez la souris sur ce code !

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

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

L'utilisation de transformations 3D est elle aussi un jeu d'enfant ! Il vous suffit de spécifier la transformation à l'aide de coordonnées 3D et vous voilà prêt. Passez la souris sur ce code !

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

Démos

Arcade Fire: The Wilderness Downtown
Snow Stack

Dans la pratique

Typekit - Webfonts
CSS3 Maker

Ressources