CSS 3

Blick nach vorn

Also dieser Beitrag ist wieder ein wenig mehr von technischer Natur, aber das soll jetzt keinen Abschrecken an dieser Stelle aufzuhören zu lesen, denn die Ergebnisse können sich sehen lassen. Ich will hier einen kleinen Einblick in neuere Entwicklungen geben, die die Arbeit für Webdesigner so viel schöner machen werden (in Zukunft).

Bisher werden die meisten Websites mittels Cascading Style Sheets (CSS) gestyled und hier wird CSS2 benutzt. Seit 2005 ist CSS3 in der Entwicklung und es tut sich einiges und es lassen sich sehr nette Effekte hiermit erzielen, die vorher nur mittels Bildern und einem Grafikprogramm möglich waren. Als Einschränkung ist jedoch zu nennen, dass nicht alle Browser CSS3 unterstützen (bspw. der IE erst ab IE9 beta). Der Internet Explorer (IE) ist aber allgemeinhin nicht sonderlich beliebt, bei der Designgemeinde, aber das ist ein anderes Thema (zumindest möchte ich hier nicht genauer darauf eingehen.)

Im Folgenden möchte ich ein paar Beispiele geben, wie CSS3 eingesetzt werden kann.
Falls Ihr nichts an Effekten erkennt, solltet Ihr dann mal den Browser updaten oder von IE auf Firefox umsteigen.

CSS 3 text-shadow

das dazugehörige CSS3 lautet wie folgt:
text-shadow: 0 3px 8px #2A2A2A;

Anmerkung:
Der erste Wert, in diesem Fall die 0, gibt den Versatz des Schattens von links an, die 3 Versatz nach unten, die 8 gibt den Blurwert an (den Grad der Unschärfe des Schattens). Letztlich folgt die Farbe des Schattens in diesem Fall #2a2a2a.

Eine weitere Möglichkeit, die mir persönlich sehr gut gefällt ist die Kombination mehrfacher Text-Schatten-Effekte.
Somit lassen sich Effekte erzielen, die so wirken, als ob die Schrift eingestanzt wurde.
Es folgt natürlich ein Besipiel:

Firmennest Webdesign

das dazugehörige CSS3 lautet:
text-shadow: -1px -1px 0 #101010, 1px 1px 0 #505050;

Anmerkung:
Man sieht, dass sich auch mehrere Schatten gleichzeitig einsetzen lassen.
Der erste Wert, in diesem Fall die -1, gibt den Versatz des Schattens von links an, die -1 Versatz nach unten, die 0 gibt den Blurwert an (den Grad der Unschärfe des Schattens). Er ist in diesem Fall 0, da es ein harter Schatten sein soll. Letztlich folgt die Farbe des Schattens in diesem Fall #101010. Nun folgt der helle Schatten von rechts mit 1px Versatz nach links, 1px Versatz nach unten und ebenfalls die 0 für den harten Schatten ohne Blur. Die Farbe ist der letzete Wert (#505050).

Das soll an dieser Stelle ersteinmal reichen, aber in Kürze werden weitere neue Features folgen. Ihr dürft gespannt sein.