CSS3: transition (Übergänge für sanfte Animationen)

Dank CSS3 ist es nun auch möglich, Webseiten ohne Flash, animierte GIFs oder JavaScript zu animieren. So ist der Genuss von Effekten ohne Plugin oder unzählige HTTP-Requests möglich, während der Einbau dennoch ohne komplexe Script-Konstruktionen möglich ist. Wenn diese Möglichkeiten geschickt genutzt werden, dann können sie einen wirklichen Mehrwert für das WWW darstellen. Hoffentlich wird durch sie aber nicht eine neue Generation Beepworld-Seiten (Achtung, Ironie!) geboren. Daher sollte nur derjenige weiterlesen, der seriöse gestalterische Ziele verfolgt. 😉 Continue reading

CSS3: transform (Lineare Transformationen)

CSS3: WürfelEine hochinteressante, neue Eigenschaft in CSS3 ist transform. Sie ermöglicht lineare Transformationen beliebiger Seitenelemente, d.h. wir können sie verschieben, rotieren, skalieren und scheren. Auf den ersten Blick wirkt das Konzept recht kompliziert und mag so manchen abschrecken, der von Vektoren und Matrizen Ausschlag bekommt. In Wirklichkeit ist es aber gar nicht so kompliziert, zumal es gesonderte Funktionen gibt, die sich intuitiv nutzen lassen, und die die Matrix vor den Augen des Designers verbergen. Auch diese neue Eigenschaft wird von allen modernen Browsern, abgesehen vom IE, bereits unterstützt. Continue reading

CSS3: border-radius (abgerundete Ecken)

Neben den neuen Schatteneffekten liefert CSS3 mit der Eigenschaft border-radius eine weitere Gestaltungsmöglichkeit, die zuvor nur mit Trickserei und Grafiken umzusetzen war. Endlich lassen sich so mit den Bordmitteln des Browsers abgerundete Ecken erzeugen, was z.B. in geschickter Kombination mit Schatten für anspruchsvolle, plastische Layouts verwendet werden kann. Auch border-radius wird mittlerweile von allen modernen Browsern, abgesehen vom IE, unterstützt. Continue reading

CSS3: color (Farben) mit Farbtabellen

Mit CSS3 bekommen Webdesigner neue Möglichkeiten, um Farben zu definieren. Dadurch gibt es natürlich nicht schlagartig mehr Farben, aber sie können je nach Einsatzgebiet einfacher verwendet werden. Hinzu kommt Alphatransparenz, die ansprechende Transparenzeffekte ohne den Einsatz von Grafiken ermöglicht. Dieser Beitrag erklärt die neuen Farbnotationen und liefert einige Beispiele und Farbtabellen. Continue reading

CSS3: box-shadow (Schatten)

Dank CSS3 erhalten Webdesigner endlich die Möglichkeit, ansehliche Schatteneffekte ohne Grafiken zu verwirklichen. Somit können Webseiten optisch geschickt aufgewertet werden, ohne den Quelltext unnötig kompliziert zu gestalten und ohne zusätzlichen Datenballast zu erzeugen. Die dazu notwendige Eigenschaft box-shadow wird mittlerweile abgesehen vom IE8 von allen modernen Browsern unterstützt. Continue reading

Webseiten-Performance erhöhen

Dwain Chambers 100m semisSeit ein paar Wochen versuche ich nach und nach die Performance dieses Blogs zu verbessern. Dabei achte ich insbesondere auf die Leistungsanzeige bei den Google Webmaster Tools, weil diese nicht nur meinen Mittelwert anzeigen, sondern auch den 20%-Quantil aller Webseiten. Sicherlich ist das keine repräsentative Anzeige, aber immerhin eine brauchbare Vergleichsgröße. Momentan pendelt mein dortiger Wert grob zwischen 2 und 5 Sekunden, mein Ziel sind möglichst konstante Werte um 2 Sekunden. Bei der Optimierung greife ich auf die Erweiterungen Google Page Speed und Yahoo! YSlow für Firefox mit Firebug zurück, die mich mit vielen Detailinformationen über meine Seite unterstützen. Continue reading

CSS-Sprites: HTTP-Requests einsparen

Die Ladezeiten einer Webseite sind, wie ich z.B. im Artikel über das Kurzzeitgedächtnis und WebDesign beschrieben habe, enorm wichtig. Neben dem Problem, dass ein Nutzer bei einem lange nicht beachteten Tab vergessen kann, wozu er die Seite besucht hat, neigen viele Surfer dazu möglichst viele Suchergebnisse o.ä. in Tabs zu öffnen. Sie schauen sich dann diejenigen Resultate an, die schnell fertig geladen haben, und können den Rest gleich wieder schließen, wenn sie die gewünschte Information bereits gefunden oder gar das gesuchte Produkt bestellt haben. Continue reading