verwebbt.de

CSS3-Gedöhns wird die Welt regieren.

Ich entschloss mich zu dem momentanen Design eine Neuerung, die etwas mehr ins Auge fällt, zu machen.

Diese Neuerung findet man im Header in Form eines Post-It’s, das beim drüberfahren schön nach unten gleitet und den letzten Tweet meines Twitteraccounts anzeigt. Das scheint in Zeiten von einfachem Handling mit JavaScript durch Frameworks wie jQuery nichts besonderes zu sein. Schließlich fadet auch die Farbe von Verweisen und das Meta-Krams an der Seite mithilfe von jQuery.

Diese Animation (falls man einen zukunftsweisenden Browser wie Chrome, Safari, einen neuen Firefox oder Opera besitzt und sie somit auch sehen kann) basiert hundertprozentig auf CSS3. Ja, richtig, eine Animation mit CSS. CSS3 hat nämlich nicht nur Feautures wie Schlagschatten, gerundete Elemente oder statische Drehung von Objekten – nein – CSS3 wird dynamisch!

Der obere Teil des Bildes zeigt mein Post-It in eingefahrenem Zustand, der untere Teil zeigt es in ausgefahrenem Zustand. Bei einem Hover-Event verläuft zwischen den beiden Stadien eine Animation, die am Ende etwas abgebremst wird. Der CSS3-Code für diesen Selektor mit der Pseudo-Klasse :hover ist ganz einfach.

transition: all 0.3s ease-out;

Es werden also alle Veränderungen innerhalb von 0,3 Sekunden mit dem Effekt ease-out (wie oben beschrieben) animiert. Man braucht einfach noch dem :hover-Selektor mit ganz normalem CSS zu sagen, was sich bei übergefahrenem Zustand verändert. (Der Code ist für rohes CSS3. Man muss die bekannten -webkit-, -moz-, …, Präfixe den Attributen noch hinzufügen.)

Das bietet zwar nicht alle Möglichkeiten, die jQuery auch bietet, aber die meisten Effekte auf Seiten spezifizieren sich nur darauf. Klar, ich kann mit CSS nicht die Twitter .json-Datei auslesen und den neusten Tweet in diesen Selektor schreiben, aber das ist ja auf den Inhalt bezogen, nicht auf das Aussehen. Wir werden sehen, wohin sich CSS3 und dessen Nachfolger entwickeln wird.

Auf Webstandard sind einige Beispiele aufgelistet, die zeigen, was sich doch alles damit schon machen lässt.

Update:
Mittlerweile habe ich einfach mal alles auf CSS umgestellt. jQuery sorgt momentan nur dafür, dass der neuste Tweet ausgelesen wird. Alle anderen Effekte sind ausschließlich CSS3. Chrome hat meiner Meinung nach die beste Engine, um das Zeug auch vernünftig anzuzeigen.