Webdesign mit CSS 3: Neue Styles und Typographie Effekte

CSS 3 ist ein weites Feld und bietet viele sinnvolle und interessante Neuerungen. Ich zeige ein paar meiner Design Experimente mit CSS 3 und stelle den Code und die Grafiken zur freien Verwendung und Weiterbenutzung.

CSS 3 macht Spaß als Webdesigner!

Ein Bereich, der mir als Webdesigner insbesondere Spaß macht, sind die neuen visuellen Stile. Mit CSS 3 können Effekte wie Schatten, abgerundete Ecken oder individuelle Border mit Grafiken einfach direkt mit CSS umgesetzt werden. Dadurch entfallen die aufwendigen technischen Konstrukte mit denen solche Effekte bisher realisiert wurden. Es werden weniger Grafiken benötigt und das ganze bleibt einfacher zu modifizieren. Toll!

Einerseits lassen sich die Effekte einfacher umsetzen und ein Layout enorm aufwerten, denn Text-Shadow Effekte etc. waren bisher schlichtweg nicht möglich, andererseits hat man auch genauere Kontrolle über die eingesetzten Effekte. Hier meine ich den Prozess vom Design zur Umsetzung: In der Design Phase (Photoshop & co.) sind alle möglichen Effekte schnell erzeugt – wie diese jedoch später in der HTML Version aussehen ist etwas anderes. Berücksichtigt man jedoch die CSS 3 Möglichkeiten bereits in der reinen Design Phase ist der Weg zu HTML direkter und das Endergebnis entspricht dem beabsichtigtem Design. Dies trifft insbesondere zu, wenn mehrere Personen an der Entwicklung einer Website beteiligt sind.

CSS 3 ist in Modulen aufgebaut

CSS 3 beinhaltet Neuerungen in allen Bereichen der Darstellung von Inhalt. Um die Entwicklung zu beschleunigen ist dritte Spezifikation in verschiedenen Modulen aufgebaut, welche einen unterschiedlichen Status haben. Einige sind bereits final, andere noch experimentell.

Eine Übersicht bietet CSS 3: current work des W3C. Das Spektrum reicht von den neuen Selectors bis zu Transitions oder auch Fonts. In den Designs Experimenten verwende ich vor allem die Möglichkeiten aus den Modulen Color und Backgrounds and Borders.

CSS 3 Browser Unterstützung

Aktuell (Februar 2010) werden die meisten CSS 3 Stile bereits von den Browsern, die auf Webkit (Safari, Chrome) und Gecko (Mozilla Firefox) basieren, unterstützt – zumindest in deren aktuellsten Versionen. Der Internet Explorer hingegen hat auch in der Version 8 noch Probleme mit vielen Modulen. Die Effekte der CSS Designs, die ich hier gestaltet habe, zeigen Safari 4, Chrome 2 und Firefox 3.6 an.

Eine schöne Übersicht der CSS Browser Unterstützung bietet die Web Designers’ Browser Support Checklist (HTML 5 & CSS 3).

CSS 3 Design Spielwiese

Um die beeindruckenden Möglichkeiten von CSS 3 Styles zu erkunden. habe ich mir Beispiel Content Boxen genommen und mit CSS ausgestaltet. Dabei basieren alle Boxen auf dem gleichen HTML Mark-up und nur die CSS Stile unterscheiden sich.

Als Anforderung habe ich mir gestellt möglichst wenig Bilder einzusetzen und viele der neuen CSS 3 Eigenschaften benutzen. Dafür müssen jedoch im Moment noch die Vendor-specific Properties (-moz, -webkit) benutzt werden. Safari 4 und Firefox 3.6 werden die Boxen damit korrekt angezeigt.

Der Internet Explorer, auch in der Version 8, unterstützt die neuen Effekte jedoch nicht. Weil es mir in diesem Fall aber nur um das Ausprobieren der neuen visuellen CSS 3 Eigenschaften ging, ignoriere ich in diesem Fall das Problem. Den gewaltigen Unterschied sieht man in den Screenshots der Design Beispiele.

Design Stil 1 – Klassik

HTML / CSS Version anzeigen

Zum Vergleich:

• Firefox Preview  (Firefox 3.6 Windows)
• Safari Preview (Safari 4 Windows)
• Internet Explorer Preview  (Internet Explorer 8)

CSS 3 Eigenschaften

• border-radius
• box-shadow
• text-shadow
• rgba() Farb-Angaben
• CSS Gradients (als background-image)

Zusätzlich wird Inhalt nach einem Absatz mit content: hinzugefügt und ein paar der neuen Selectors benutzt.

Design Stil 2 – Natur

HTML / CSS Version anzeigen

Zum Vergleich:

• Firefox Preview  (Firefox 3.6 Windows)
• Safari Preview  (Safari 4 Windows)
• Internet Explorer Preview  (Internet Explorer 8)

CSS 3 Eigenschaften

• box-shadow
• text-shadow
• rgba() Farb-Angaben
• CSS Gradients (als background-image)
• border-image
• background-clip

Mit border-image lassen sich sehr einfach visuell hochwertige Rahmen gestalten, aber trotzdem bleiben die Boxen skalierbar. Eine mächtige neue Eigenschaft, die Vieles vereinfacht!

Design Stil 3 – Carbon

HTML / CSS Version anzeigen

Zum Vergleich:

• Firefox Preview  (Firefox 3.6 Windows)
• Safari Preview  (Safari 4 Windows)
• Internet Explorer Preview  (Internet Explorer 8)

CSS 3 Eigenschaften

• border-radius
• box-shadow
• text-shadow
• rgba() Farb-Angaben
• multiple background-images

Auch mehrere Hintergrundbilder für ein Element schaffen deutlich mehr Flexibilität in der Gestaltung. Ein Element kann ein Start-, Fill- und ein End-Image ohne zusätzliches Mark-Up bekommen. Herrlich!

Code & Grafiken Download Das Design der Beispiel Content Boxen stelle ich gern zur freien Verfügung. Den HTML Code und die verwendeten Grafiken gibt es als Zip zum download. Viel Spaß beim eigenen Experimentieren oder Weiterverwenden. Download HTML / CSS 3 Code & Grafiken

Code & Grafiken Download

Das Design der Beispiel Content Boxen stelle ich gern zur freien Verfügung. Den HTML Code und die verwendeten Grafiken gibt es als Zip zum download. Viel Spaß beim eigenen Experimentieren oder Weiterverwenden. Download HTML / CSS 3 Code & Grafiken

Fazit

Die CSS 3 Eigenschaften lassen einen wirklich umdenken, da viele der bisherigen Einschränkungen beim Webdesign mit CSS aufgehoben werden. Mehr Möglichkeiten, genauere Kontrolle und leichtere Modifikation – ich habe Spaß an CSS 3! Spaß ja, aber ich halte es auch für essentiell und eine Weiterentwicklung, die man nicht verschlafen darf. Umso ärgerlicher ist die aktuelle Situation der Browser Unterstützung. Selbst für die korrekte Anzeige in Firefox und Safari sind pro Eigenschaft 3 Zeilen nötig:

• -moz-border-radius: 10px;
• -webkit-border-radius: 10px;
• border-radius:10px;

Hoffen wir also auf bessere Browser Unterstützung bzw. die Verbreitung aktueller Browser Versionen in naher Zukunft. Bis dahin ist es sinnvoll CSS 3 nur als Zusatz zu verwenden, um einem Design den letzten Schliff zu geben.

— by David