HTML5Tutorial

Kaum ein Entwickler oder Web Designer hat alle Keywords, Kommandos oder Tags einer Programmier-, Script- oder Beschreibungssprache im Kopf. Zum Einen sind das in vielen Sprachen einfach zu viele, von denen man die meisten auch nur ganz selten braucht, zum anderen ist es auch gar nicht nötig, sie auswendig aufsagen zu können. Man muss immer nur wissen, wo sie zu finden sind.

Eine große Hilfe für Letzteres sind sogenannte Cheat Sheets (zu Deutsch: Spickzettel), die man sich z.B. großformatig ausdrucken oder für den schnellen Zugriff ins Dateisystem legen kann. Auf diesen Cheat Sheets findet man dann eine Übersicht über alle (oder zumindest die wichtigsten) Befehle, die man in der jeweiligen Sprache benötigt. Auch für HTML5 und CSS3 haben sich einige findige Köpfe schon mal hingesetzt und solche Spickzettel entworfen. Hier möchte ich euch eine kleine Liste von meiner Meinung nach guten HTML5 und CSS3 Cheat Sheets präsentieren. Read more »

Der bereits mehrfach hier erwähnte Blog Splashnology hat ein kleines Tutorial und Beispiel zum Thema Animation per CSS-Sprites veröffentlicht. Bei CSS-Sprites werden mehrere Grafiken in einer einzigen Grafikdatei abgelegt, der Webbrowser zeigt aber nur die gerade benötigte Teilgrafik an. Für die Animation ist dies in sofern von Nutzen, dass schon die komplette Grafikdatei geladen ist, es also keine Ladepausen zwischen den Bildsprüngen gibt. Animiert wird dann nur noch die background-position CSS-Eigenschaft, um den benötigten Teil der Grafik in den sichtbaren Bereich einer CSS-Box zu rücken.

Im Prinzip ist das also nur eine weitere Einsatzmöglichkeit der CSS3 Keyframe-Animation, die bereits im Artikel vom 3.7. erwähnt wurde. Funktioniert aber super und ruckelfrei. Leider bisher wieder nur in Webkit-Browsern (Chrome, Safari).

zum Artikel

CSS3 ermöglicht es, ohne Zuhilfenahme von JavaScript sogenannte Keyframe-Animationen zu erstellen. Bei dieser Technik bestimmt man Anhang von einigen wenigen Schlüsselbildern einen groben Ablauf einer Animation, die restlichen Zwischenbilder werden dann automatisch generiert und über eine vorgegebene Zeit eingespielt. Keyframe-Animationen sind u.a. aus Adobes Flash bekannt, bei dem die Keyframes in einer Zeitleiste festgelegt werden können. Der Vorteil liegt klar auf der Hand: Man braucht nicht die komplette Szene durchzuanimieren, es genügt, die wichtigsten Eckpunkte in Form von Schlüsselbildern festzulegen. Nahezu jede CSS-Eigenschaft kann somit animiert werden.

Klar, die Keyframe-Animationen von CSS3 sind lange nicht so flüssig und ausgereift wie die von Flash oder solche, die mit JavaScript realisiert werden können. Für einfache Button-Mouseovers zum wechseln der Farbe oder für ein wenig Bewegung reicht es aber allemal. Splashnology hat das Prinzip der CSS3-Keyframe-Animation, die bisher nur in Webkit-basierten Browsern (Safari, Chrome) zur Verfügung stehen, in einem kurzen und übersichtlichen Tutorial erklärt.

zum Artikel

Kurzes Tutorial für CSS3 Keyframe-Animationen

CSS3 bietet vielen neue Funktionen gegenüber seines Vorgängers. Beispielsweise musste man sich bei CSS2 mit wenigen Pseudoklassen wie :hover oder :active zufrieden geben. Mit CSS3 kommen weitere wie :first-child und :last-child oder :target hinzu. Dies erleichtert unter anderem das Erstellen on Navigationsmenüs ohne Hilfe von JavaScript. Es gibt aber auch noch weitere Möglichkeiten, solche mit reinem HTML und CSS umzusetzen.

Liste von Tutorials zum Thema Navigationsmenü mit CSS3

Der Blog Splashnology hat eine Liste an Tools, Tutorials und Techniken zusammengestellt, die bei der Erstellung von Menüs zur Website-Navigation helfen sollen und die aktuellen CSS-Technologien abdecken.

zur Liste

Wer durch die letzten beiden Beiträge Lust bekommen hat, selbst eine geniale Webanwendung auf Basis des HTML5 Canvas zu erstellen, dem sei mit dem Tutorial Canvas from Scratch von net tuts+ eine tolle und ausführliche Schritt-für-Schritt-Anleitung gegeben.

Canvas from Scratch: HTML5 Canvas Tutorial

Das Tutorial besteht aus mehreren Sessions, bisher vier Stück, die Themen wie „Basics“, „Drawing“, „Transformations & Gradients“ und „Pixel Manipulation“ behandeln. So lernt man schnell, wie man im HTML5 Canvas Formen zeichnen und füllen kann oder sogar eigene Filter für geladene Fotos erstellt.

zum Tutorial