Das Webdesign emanzipiert sich von Photoshop

Schöne Websites mit grafischen Rafinessen brauchten früher meist die Hilfe von Photoshop oder einem anderen Grafikprogramm. Mit CSS wurde es dann zunehmend besser, wer sich auskennt kann so die ein oder andere Grafik sparen - das machts nicht nur einfacher sondern die Ladezeiten natürlich auch kürzer. Seit CSS3 (auch wenn noch nicht zum fertigen Standard erhoben) muss man nun immer seltener zum Grafikprogramm greifen.
Der CSS3-Standard ist zwar noch nicht fertig, aber viele Browser-Hersteller bauen die interessantesten Features schonmal mit prorietären Präfixen in ihre Rendering-Engine ein, sodass der Webdesigner diese bereits nutzen kann.
Im Folgenden mal ein kleiner Überblick, was wir mittlerweile schon im Web machen können ohne Photoshop starten zu müssen.


Schatten

Bei Photoshop ist es der Ebeneneffekt "Schlagschatten", den man im Web dann ab und an mit Grafiken oder zusätzlichen, im Hintergrund liegenden Boxen, umsetzen musste. Bei CSS3 ist es wesentlich einfacher.
box-shadow (für Mozilla mit dem Präfix -moz- und für Webkit mit -webkit-) erwartet vier Argumente: Versatz von oben, Versatz von links, Stärke des Verlaufs und die Schattenfarbe. Beispielsweise:
box-shadow: 5px 5px 10px #000;
ergibt einen um 5 Pixel von oben und links versetzen, schwarzen Schatten mit einem 10 Pixel Verlauf.
Den Schatten gibts übrigens nicht nur für Boxen, sondern genauso auch für Text, nur heißt das CSS-Attribut hier sinnigerweise:
text-shadow


abgerundete Ecken

Der Name klingt ja schonmal komisch, entweder eckig oder rund, aber runde Ecken? Naja egal, der Name hat sich etabliert und alle wissen was gemeint ist.
Sobald man einer Box also einen Außenrahmen gibt (z.B. border: 1px solid #000;) kann man diese Ecken auch abrunden, möglich macht das die CSS-Eigenschaft border-radius (für Mozilla und Safari wieder mit den entsprechenden Präfixen).
border-radius nimmt entweder einen Wert für alle Ecken entgegen oder geht nach dem gängigen Schema bei CSS von z.B. margin und padding vor. Also 2 Werte für oben-unten und links-rechts, 3 Werte für oben links-rechts und unten oder eben 4 Werte wenn man alle Ecken einzeln ansprechen will (begonnen wird oben links und dann geht es im Uhrzeigersinn einmal rum).
Beispiel:
border-radius: 5px 10px 15px;
rundet die obere linke Ecke mit einem 5 Pixel-Radius ab, die obere rechte und untere linke mit einem 10 Pixel-Radius und die untere rechte mit einem 15 Pixel-Radius.


Hintergrund-Farbverläufe

Die allseits beliebten Hintergrund-Farbverläufe brauchen im Firefox und den Webkit-Browsern auch schon keine Grafiken mehr. Einfacher gehts mit
-moz-linear-gradient (für Mozilla) und -webkit-gradient (für Webkit).
Folgender Code erzeugt einen Hintergrundverlauf von unten links ausgehend von einem Grau zu schwarz.
background-image: -moz-linear-gradient(left bottom, #ccc, #000);

Webkit hingegen möchte es etwas genauer haben, dort lautet der CSS-Schnipsel:
background-image: -webkit-gradient(linear, left bottom, right top, from(#ccc), to(#000));

Statt top, left, right und bottom können auch direkt Pixel angegeben werden und die Farbe kann neben Hex-Code natürlich auch einfach mit blue o.Ä. definiert werden.

Noch etwas toller wirds, wenn man die Hintergrundverläufe mit transparenten Hintergrundbildern kombiniert, das geht nämlich auch problemlos.
background-image: url(/gfx/bsp.png), -moz-linear-gradient(left bottom, #ccc, #000); (entsprechend anderer Code für Webkit)
macht dann den Farbverlauf hinter dem Hintergrundbild, welches natürlich transparente Stellen haben muss.
Als Fallback, für die Browser die diese Verläufe noch nicht unterstützten, kann man immernoch zusätzlich eine Hintergrundfarbe via background-color einbinden.


Box-Rotation

Bisher galt im Webdesign immer, gerade Linien und Boxen mit horizontalen und vertikalen Linien kann man problemlos darstellen, soll aber etwas (beispielsweise ein Bild) schräggestellt werden, muss man es in Photoshop arrangieren (Bild entsprechend schräg stellen vor transparentem Hintergrund). Die neue CSS-Eigenschaft transform macht auch hier den Griff zum Grafikprogramm nun überflüssig.
Mit -webkit-transform und -moz-transform gibt man dem Frontend-Entwickler nun die Möglichkeit im Editor Boxen rotieren zu lassen, besonders praktisch wenn mal nachträglich etwas geändert werden muss.
Beispiel:
-moz-transform: rotate(27deg);
dreht eine Box um 27 Grad im Uhrzeigersinn.


Animation

Bisher ist die Möglichkeit zur Animation via CSS den Webkit-Usern vorbehalten. Mit Hilfe von -webkit-transition kann man Veränderungen von Boxen nicht ruckartig darstellen lassen sondern langsam animiert. Beispielsweise wenn sich beim Überfahren mit der Maus (CSS :hover) die Position einer Box verändert oder kombiniert mit dem Effekt von eben (der Schrägstellung einer Box). Beispiel:
-webkit-transition: all 150ms

Dieser Code sagt nun aus, dass alle (animierbaren) Veränderungen dieser Box über 150ms animiert werden sollen. Diese CSS-Eigenschaft kann aber noch mehr.
Statt all kann man beispielsweise eine bestimmte Eigenschaft angeben, wie opacity oder -webkit-transform auf die sich dann die Animation bezieht. Als dritten Paramter kann man dann noch die Art der Animation angeben: linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier(x1, y1, x2, y2). (detaillierte Beschreibung der Webkit-Transitions auch bei webkit.org)

Ihr seht also, es ist schon so einiges möglich mit CSS, was vor Jahren noch undenkbar war. Leider ist der Großteil dieser CSS-Eigenschaften nur im Firefox und Webkit-Browsern (Safari und Chrome) möglich, der Opera zieht gerade stark nach und Microsoft zeigt mit den ersten Einblicken auf den Internet Explorer 9 guten Willen.

Im Hinblick auf die Einsatzmöglichkeiten handhabe ich persönlich es so: Ich setze die aktuellen Techniken wenn nötig und möglich ein, ältere Browser oder eben Browser, die diese Eigenschaften noch nicht verstehen, bekommen eben eine weniger schöne Internetseite angezeigt. Bei einem sich so schnell entwickelnden Medium wie dem Internet kann man meines Erachtens nach nicht immer voll abwärtskompatibel sein, sonst handeln wir uns wieder so ein IE6-Problem ein (keiner außer den Webentwicklern klagt über mangelnde Darstellungsmöglichkeit im IE6, weil sich die Webentwickler immer noch stundenlang ein Bein ausreißen, dass es auch im mittlerweile 9 Jahre alten IE6 noch nahezu gleich aussieht).
Kurzum also: wer mit seinem Browser auf aktuelle Technik setzt bekommt alles schöner und komfortabler angezeigt, wer noch mit dem Trabi der Web-Browser unterwegs ist hat weniger Surf-Vergnügen, kommt aber genauso an sein Ziel (den Inhalt der Webseiten).