Aufmerksamen Besuchern meiner Webseite (mit vernünftigen Browsern) ist vielleicht aufgefallen, dass seit ein paar Tagen im Kopf und Fuß des Blogs lustige Mouseover-Effekte zu sehen sind; der gesamte Kopfbereich steht leicht schräg und wird gerade, wenn man ihn mit dem Zeiger berührt, und die drei Spalten im Seitenfuß mit den Links, Tags und Meta-Links vergrössern sich leicht, wenn man sie mit der Maus ansteuert.

Täterätä, darf ich vorstellen: Ein klein wenig Spaß mit den 2D-transform Eigenschaften aus CSS3, dem nächsten großen Ding in der Webentwicklerwelt.

Das Blog hier dient ja immer wieder mal als Experimentierfeld für neues Zeug, bevor ich das in den "professionellen" Einsatz nehme. Da einige Eigenschaften des neuen CSS-Standards nun von Firefox, Safari, Opera und Chrome unterstützt werden und auch der kommende 9er Internet Explorer sich zumindestens nicht ganz abgeneigt zeigt, spricht nichts dagegen, die neuen Spielsachen auch mal an unkritischen Stellen der Webseite einzusetzen. Oder besser gesagt: Es so einzusetzen, dass Besucher, die es sehen können, was geboten wird, aber den anderen nichts vorenthalten wird.

Zum Beispiel meine Seite, die angezeigt wird, wenn in der Suche etwas erfolglos gesucht wurde:

Mithilfe der Eigenschaften transform und border-radius lassen sich aus der normalen Überschrift und einem zusätzlichen leeren Div eine Sprechblase bauen.
Für IE-Besucher ändert sich nix, sie sehen einfach nur die normale Überschrift und das Bild und die anderen freuen sich hoffentlich. :)

Damit IE-Besuchern nicht die für sie unnütze Blasenhintergrundfarbe sehen, habe ich Text- und Hintergrundfarbe mit dem neuen Farbmodus RGBA angegeben, den ebenfalls nur die coolen Browserkinder verstehen.

Für einen praxisnahen Einstieg in CSS3 empfehle ich diesen Artikel auf alistapart und das dazugehörige Buch "CSS3 for Webdesigners" von Dan Cederholm, meine momentane U-Bahn-Lektüre (dank Oliver Beckenhaub, der mir das und die Schwester, "HTML5 for Webdesigners" von Jeremy Keith, freundlicher- und leihweise überlassen hat :)

Man kann sich aber auch, und das ist ja das schöne an diesem ganzen Webkram und mit ein Grund, warum ich seit bald 15 Jahren nicht mehr davon los komme, einfach im Web nach Beispielen umsuchen und versuchen, diese Anhand des Quellcodes zu analysieren und zu verstehen und dann für eigene Ideen benutzen. Listen, learn, adapt, rule!

HTML, Javascript, CSS - das ist wie Punk. Einfach selbermachen! :-)