Ein wirklich tolles Beispiel für den Einsatz von CSS3 bei der Gestaltung von Formularen liefert das Glowform von kylarose. Das dunkle Design überzeugt mit seinem farbwechselnden (Safari, Chrome) oder mehrfarbigen alternierenden (Firefox 4 & 5) Fokusrahmen, der Anzeigt, ob der Cursor sich gerade in einem Formularfeld befindet.
Farbwechsel in Webkit Browsern
Alternierende Farben im Firefox
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).
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.
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.
Adobe – im Webumfeld ja oft mit Flash in Verbindung gebracht – wirkt wie viele andere Firmen auch am neuen CSS3 Standard mit. Unter Anderem hat Adobe einen Entwurf für ihre hauseigene Technik der CSS-Regions bei der W3C eingereicht. Hiermit soll es möglich werden, einzelne HTML5-Elemente miteinander zu verknüpfen und somit eine Dokumentenstruktur zu schaffen, die verknüpften Textfeldern aus InDesign, Pages oder Word ähnelt.
Angenommen eine HTML5-Section wird mit einer zweiten per CSS-Regions verknüpft und anschließend mit Text gefüllt. Füllt der Text mehr als die erste Section so würde der Fall „overflow“ eintreten, dessen Verhalten man bisher mit CSS definieren konnte – entweder der Text wurde abgeschnitten, lieft über die Textbox hinaus oder die Box wurde scrollbar gemacht. Durch die Verknüpfung mit einer zweiten Section bricht der Text nun in diese zweite Box um und wird in dieser fortgesetzt. Somit lassen sich sehr einfach mehrspaltige Layouts realisieren.
Umbruch in neue Textbox mit CSS-Regions