Neuerungen in CSS 3

Fast alle Protokolle, Sprachen und Standards im Internet werden heute anders verwendet, als sie ursprünglich gedacht waren. So auch HTML und CSS. Daher ist es an der Zeit, mit CSS 3 und HTML 5 einige neue Funktionen in die Standards aufzunehmen, die vorher mühsam getrickst werden mussten (z.B. Mehrspaltigkeit) oder einfach verwendet wurden, obwohl sie nicht vom W3C abgesegnet waren. (z.B. Schatten mit CSS)


Mehrspaltige Layouts

Mit CSS war es bislang recht "tricky", Layouts zu entwickeln, bei denen sich alle Spalten an den längsten Inhalt anpassen. Dies ging nur mit Tabellen oder mit schmutzigen Tricks.

In CSS 3 gibt es endlich diese einfache Möglichkeit:

Mit den CSS Tables ist es möglich, die Vorteile von Tabellenlayout mit der Flexibilität von CSS zu kombinieren.


Animationen

Bisher waren Animationen das unangefochtene Territorium von Javascript. Das könnte sich mit CSS 3 ändern: Hier ist es möglich, Änderungen zwischen verschiedenen CSS-Einstellungen nicht aprupt sondern mit einer Animation auszuführen.

Ein paar Beispiele: (bisher nur in Webkit-Browsern: Safari und Chrome)
http://www.the-art-of-web.com/css/css-animation/
http://24ways.org/2009/css-animations
http://www.1stwebdesigner.com/development/50-awesome-css3-animations/
http://webkit.org/blog/324/css-animation-2/

Es bleibt zu hoffen, dass die Autoren es mit den CSS Transitions nicht übertreiben die verhassten <blink> und <marquee> Tags sind nichts gegen missbrauchtes CSS3!


Verwaltung von Schriftarten

Mit der Einführung von @font-face ist es möglich, in Webseiten Schriftarten zu benutzen, die nicht auf dem Rechner des Betrachters installiert sind. Die Schriftart sollte im "TrueType"-Format auf den Server hochgeladen werden.

Kostenloses Angebot von Google zur Einbindung von Fonts
http://code.google.com/webfonts

Nähere Infos, wie das @font-face-Modul verwendet werden kann
http://tobias-otte.de/essays/web-fonts/


Weitere Funktionen


  • Schlagschatten
  • Farbverläufe
  • Halbtransparente Hintergrund- und Rahmenfarben
  • Rotation


Ein Beispiel mit einigen neuen Funktionen


Das Beispiel sollte im Firefox etwa so aussehen wie in diesem Bild. (klick zum vergrößern)
Das Beispiel sollte im Firefox etwa so aussehen wie in diesem Bild. (klick zum vergrößern)

Das Beispiel sollte im Firefox etwa so aussehen wie in diesem Bild. (klick zum vergrößern)

Der Vergleich in groß...


CSS 3 Beispiel

Dieses Element ist um 10° mit dem Uhrzeigersinn gedreht und hat einen halbtransparenten Hintergrund. Es befindet sich innerhalb eines Farbverlaufes mit Schlagschatten.



Leider sieht gedrehter Text in den meisten Browsern noch nicht gut aus!




Kommentare