HTML5 Rocks

HTML5 Rocks

HTML5 Funktionen

Präsentation

Dank der Einführung von CSS3 ist das Erstellen hochwertiger und optisch ansprechender Websites und Anwendungen in HTML so einfach wie nie zuvor. CSS3 beinhaltet viele neue Techniken und Erweiterungen wie 2D-Transformationen, Übergänge, 3D-Transformationen und Webschriftarten.

Sie können ohne Codierungsaufwand für viel Nutzerfreundlichkeit sorgen. Fügen Sie einfach ein wenig CSS zu Ihren vorhandenen Anwendungen hinzu.

Neuerungen

Try This!

Mit CSS3-Transformationen können Sie auf jedes DOM-Element mit einfachen Stilen Drehungen, Skalierungen, Neigungen und Übergänge anwenden.

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

Mit Übergängen können Sie festlegen, wie der Stil eines DOM-Elements zwischen transformierten Stadien animiert wird. Sie können beispielsweise die Hintergrundfarbe animieren, wenn Nutzer die Maus über ein Element bewegen. Bewegen Sie Ihre Maus über diesen Code!

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

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

Die Anwendung von 3D-Transformationen ist ebenfalls ganz einfach. Dazu müssen Sie nur die Transformation in 3D-Koordinaten angeben. Das ist schon alles. Bewegen Sie Ihre Maus über diesen Code!

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

Demos

Arcade Fire: The Wilderness Downtown
Snow Stack

In der Wildnis

Typekit - Webfonts
CSS3 Maker

Ressourcen