Mit dem letzten Beitrag habe ich die Serie CSS3-Generatoren begonnen. Er befasste sich mit dem CSS3 Transform Generator. Setzen wie die Serie mit der Einführung zu CSS3Gen fort. CSS3Gen ist ein lehrreicher Generator, der die Eigenschaften abgerundete Ecken, Box-Schatten und Text-Schatten unterstützt. Auf der Seite Border Radius liefert CSS3Gen eine einführende Beschreibung und eine Tabelle der unterstützten Browser. Ich werde am Ende dieser Serie besprechen, wie man auch die Internet-Explorer vor Version 9 mit ins Boot holen kann.

Abgerundete Ecken (CSS3-Eigenschaft border-radius)

Mit Hilfe der CSS3-Eigenschaft border-radius können Sie abgerundete Ecken ohne Grafik-Elemente oder Hacks darstellen. Die W3C-Standard-Syntax lautet für einen Radius von 5 Pixeln:
.rounded-corners { border-radius: 5px; }
Bislang empfiehlt es sich jedoch, die Browser herstellerspezifisch anzusprechen, weil kaum eine aktuelle Browserversion den Standardbefehl schon versteht. Aber um für zukünftige Browserversionen aufwärtskompatibel zu sein, sollten Sie den Standard-Befehl immer mit angeben. Momentan definieren Sie aber den 5-Pixel-Radius wie folgt:

Dabei ist die Reihenfolge wichtig: Die Definitionen für Webkit und Mozilla müssen vor der Standard-Definition stehen, damit sie von Standard-konformen Browsern ignoriert werden können – die CSS-Befehle werden der Reihe nach von oben nach unten abgearbeitet. Umgekehrt verstehen die älteren Browser den Standard-Befehl nicht und ignorieren ihn. Die Sache wird komplizierter, wenn Sie für jede Ecke unterschiedliche Radien wählen. Die Standard-Befehle sehen so aus:

Und mit den herstellerspezifischen Angaben wird daraus

Um sich die Tipparbeit zu sparen, verwendet man die Generatoren. Der CSS3Gen ist dabei sehr lehrreich, weil man mit Schiebereglern die Werte verändern kann und sofort die Ergebnisse in der Vorschau sowie im dargestellten CSS-Code sieht.

Hier habe ich gleich die Einstellungen für mein Beispiel vorgenommen. Im Beispiel sind die CSS-Grundeinstellungen die Folgenden:

Das Markup hat folgenden Code:

Im Browser sieht das so aus: Nach Übernahme der Befehle des CSS3Gen haben wir folgenden CSS-Code (wobei dem Generator der Fehler unterläuft, dass er in der Befehlzeile border-bottom-right-radius das Semikolon vergisst! – im folgenden Code-Beispiel habe ich das bereits ausgebessert):

Und hier das Ergebnis:
 Box-Schatten (CSS3-Eigenschaft box-shadow)

Als nächstes widmen wir uns dem Box-Schatten (CSS3-Eigenschaft box-shadow). Der Standard-Befehl lautet <code>box-shadow, für Mozilla heißt er -moz-box-shadow und für Webkit -webkit-box-shadow.  Für die Codierung gelten die gleichen Regeln wie für border-radius. Im Beispiel habe ich die Attribute Angle, Distance, rgb und Opacity (Transparenz) unverändert übernommen und für Blur (Unschärfe) 10px eingestellt. Hier sind die Einstellungen im CSS3Gen:

Die unten stehenden CSS-Befehle habe ich in mein Stylesheet kopiert. Das Beispiel sieht dementsprechend so aus:  Text-Schatten (CSS3-Eigenschaft text-shadow)

Hiermit lässt sich Text, insbesondere Überschriften, attraktiver gestalten. Diese Eigenschaft war in CSS 2.1 schon implementiert, wurde aber aufgrund mangelnder Unterstützung wieder verworfen. Mit CSS3 wurde sie wieder eingeführt und wird inzwischen von allen aktuellen Browsern unterstützt. Es gibt hier also nur den Standard-Befehl - wie angenehm! Die Syntax für diesen Befehl lautet:
text-shadow: 1px 2px 3px rgba(150,150,150,0.8);
Dabei ist der erste Wert der Versatz des Schattens in X-Richtung, der zweite der Versatz in Y-Richtung, der dritte gibt die Unschärfe an und rgba enthält die Werte für rot, gelb und blau sowie die Transparenz. Das Beispiel verwendet folgende Einstellungen:

Das CSS sieht jetzt wie folgt aus:

Und das Ergebnis im Browser : Ich wünsche nun viel Spaß beim Experimentieren!

Hier finden Sie die Leistungen im Rahmen der Web Services von FHCB – Florian Hamberger Computerberatung.