Читать книгу Webdesign mit CSS3 - Max Bold - Страница 4

CSS3

Web im neuen Gewand

CSS3 bringt viele neue Möglichkeiten um HTML Elemente auszuzeichnen und verwöhnt den Web-Entwickler sogar mit Animationen.

Von Alexander Ebner

Wir wollen uns die Neuigkeiten von CSS3 in diesem Artikel genauer ansehen. Sie eröffnen viele Gestaltungsmöglichkeiten, für die früher Javascript oder Grafiken benötigt wurden. Dazu zählen beispielsweise abgerundete Ecken und animierte Elemente.

Der Standard

CSS3 ist noch nicht final verabschiedet. Daher verwenden die Browserhersteller eigene Implementierungen. Diese werden mit einem Browser-spezifischen Prefix belegt. Folgendes Beispiel erzeugt abgerundete Ecken. Zu der eigentlichen CSS3 Eigenschaft border-radius kommen die Eigenschaften für Mozilla und Webkit hinzu:

order-radius: 5px;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

Die Unterschiede beziehen sich nicht nur auf die Prefixe allein, CSS-Anweisungen können sich auch grundsätzlich unterscheiden, wie im folgenden Listing ersichtlich wird. Hier wird der border-radiusa für die rechte obere Ecke einmal standardkonform und einmal für Mozilla-Browser dargestellt:

border-top-right-radius:50px;

-moz-border-radius-topright:50px;

Die Web-Entwicklerin Lea Verou hat einen Javascript-Code entwickelt, der automatisch die fehlenden Prefixe an den CSS3-Eigenschaften anhängt. Das Skript kann frei über GitHub geladen werden. Mit PrefixFree braucht sich der Entwickler keine Gedanken mehr über Browser-Prefixe machen, da sie zur Laufzeit clientseitig eingebunden werden. Bereits mit Prefixe versehene Anweisungen werden von dem Skript ignoriert.

Nicht alle Browser verstehen alle CSS3-Eigenschaften. Der Internet-Explorer wurde erst in Version 9 fit für den neuen Standard gemacht. Das muss berücksichtigt werden, wenn es beispielsweise um Unternehmensseiten handelt. Nicht alle Besucher verwenden die neuesten Browser-Versionen. Entweder weil sie Anwender sind, die sich nicht sonderlich um Sicherheit und Updates scheren, oder weil Unternehmen aus den verschiedensten Gründen veraltete Browser-Versionen verwenden. Mit der Verabschiedung von CSS3 fallen auch die Browser-Prefixe weg und es ist zu hoffen das alle Browserhersteller den neuen Standard konform in ihre Browser implementieren. Daher sollte immer auch die standardkonforme Anweisung einer CSS-Eigenschaft mit angegeben werden, auch wenn sie von den Browsern noch nicht interpretiert wird. Genauso sollten Prefixe verwendet werden, auch wenn die aktuellen Versionen der Browser den Standard schon interpretieren. Ältere Versionen verstehen nur die Anweisungen mit dem entsprechenden Prefix, aber auch solche Browser sind noch unterwegs.

Rounded Corners

Abgerundete Ecken werden immer wieder gerne als Stilmittel eingesetzt. Früher aufwändig mit Grafiken als Hintergrund in ganzen Pixel-Arrays eingebaut, genügt heute eine CSS-Anweisung auf ein Element um runde Ecken zu erzeugen. Für die drei Container im folgenden Beispiel wurden verschiedene Anweisungen verwendet, um runde Ecken zu erzeugen:

#c1{ border-radius: 20px; }

#c2{ border-radius: 20px 40px 50px 10px; }

#c3{ border-top-right-radius:50px;

border-bottom-left-radius:90px 40px;}

Der erste Container erhält auf allen vier Ecken Rundungen mit dem Radius von 20 Pixeln. Der zweite Container bekommt auf allen vier Ecken unterschiedliche Rundungen. Die vier Parameter werden in der Reihenfolge links-oben, rechts-oben, rechts-unten und links-unten angegeben. Der letzte Container bekommt rechts oben eine Rundung von 50 Pixeln. Links unten werden zwei Parameter übergeben, was eine Asymmetrie in die Rundung einbaut. Das Ergebnis ist in Bild 1 zu sehen. Rounded Corners werden von IE9, Firefox, Chrome, Safari und Opera unterstützt.

Das Ergebnis der abgerundeten Ecken (Bild 1)

Schatten

Bisher wurden Schatten mit Bildern oder halbtransparenten PNG-Bildern realisiert. Mit CSS3 haben die Auszeichnungen box-shadow und text-shadow Einzug gehalten. Ersteres verschönert Elemente wie Div-Container, Formularfelder etc. mit einem Schatten, text-shadow versieht dagegen Schriften mit einem Schatten. Beide Auszeichnungen erwarten vier Parameter: X-Offset, Y-Offset, Kantenschärfe und Farbe. Die beiden Offsets verschieben den Schatten in Relation zum Objekt auf das der Schatten angewendet wird. Die Kantenschärfe sorgt für einen weichen Übergang zwischen Schatten und Fläche. Das folgende Beispiel erzeugt verschiedene Schatten an drei Containern und einem Text:

c1 { box-shadow:10px 10px 5px #000000; }

#c2 { box-shadow:-10px 10px 20px #000000;}

#c3 { box-shadow:inset 10px 10px 5px #000000;}

p {text-shadow:10px 10px 5px #000000;}

Der Schatten der ersten Box befindet sich rechts unten mit einem etwas schärferen Schattenverlauf. Der Schatten der zweiten Box geht nach links unten mit einem sehr weichen Schattenverlauf. Der dritte Schatten befindet sich innerhalb des Containers. Dazu kommt ein Text in einem Blocktext mit Schatten. Das Ergebnis sehen Sie in dem Bild (Bild 2).

Der Schattenwurf (Bild 2)

Transparenzen mit RGBA

RGBA steht für Red, Green, Blue und Alpha und ist ein Format um Farbinformationen zu definieren. Üblicherweise werden Farbwerte in CSS mittels Hexadezimal als #RRGGBB angegeben. In RGBA werden die Werte für die drei Grundfarben als Dezimalzahl mit einem Wert zwischen 0 und 256 angegeben. Der Alpha-Wert steht für die Transparenz und liegt im Bereich zwischen 0 und 1. Ein halbe Transparenz wird demnach mit 0.5 angegeben, während 1 bedeutet, dass das Element komplett undurchsichtig ist und 0 für vollständige Transparenz steht. In folgenden Beispiele haben die drei Container einen Alpha-Wert von 0.9, 0.5 und 0.1:

#c1{background-color: rgba(255,0,0,0.9); }

#c2{background-color: rgba(255,0,0,0.5); }

#c3{background-color: rgba(255,0,0,0.1); }

Das Ergebnis zeigt sich am deutlichsten vor einem Schachbrettmuster, wie in Bild 3.

Transparenzen vor einem Schachbrettmuster (Bild 3)

Im Gegensatz zu der Anweisung opacity bezieht sich hier der Alpha-Wert nur auf den Hintergrund des Containers, während bei opacity der komplette Container samt Inhalt diese Transparenz zugewiesen bekommt.

Transforms

Mit Transforms können HTML-Elemente transformiert werden. Unter anderem kann die Größe geändert und das Element gedreht, verschoben und verzerrt werden. Am Anschaulichsten ist das in folgendem Beispiel zu sehen:

#c1 { -moz-transform: rotate(-32deg); }

#c2 { -moz-transform: skew(29deg); }

#c3 { -moz-transform: scale(1.5); }

#c4 { left:550px; border: 1px solid red; }

#c5 { left:550px; -moz-transform:translate(20px); }

Der erste Container wird mittels rotate um –32 Grad gedreht. skrew verzerrt den zweiten Container um den angegebenen Winkel. Container drei wird auf die eineinhalbfache Größe aufgeblasen während Container fünf gegenüber dem roten Container vier durch translate um 20 Pixel verschoben wird, obwohl die absolute Position von 550 Pixeln vom linken Rand entfernt dieselbe ist (Bild 4).

Die vier Transformationen (Bild 4)

Alle Transforms legen ihren Bezugspunkt auf die Mitte des Elements. Diese kann auch verändert werden. So kann ein Element nicht nur um die Mittelachse gedreht werden, sondern die Drehachse um jeden beliebigen Punkt in Abhängigkeit zum Element gesetzt werden:

#c1 { -moz-transform: rotate(-20deg); }

#c2 { -moz-transform-origin: top left;

-moz-transform: rotate(-20deg); }

In diesem Beispiel wird bei dem linken Container eine Drehung um den Element-Mittelpunkt bewirkt, während der zweite Container um die linke obere Ecke gedreht wird (Bild 5).

Transitions

Transitions bieten eine einfache Möglichkeit der Animation. Streng genommen handelt es sich um eine Keyframe-Animation, die allerdings nur einen Start- und einen Stop-Punkt kennt. Zwischenschritte sind hier nicht möglich. Transitions definieren, welche CSS-Eigenschaften animiert werden, in welcher Zeit das geschieht und in welchem Zeitablauf. Dazu werden die Eigenschaften des Elements zum Start-Zeitpunkt definiert. Mit der Pseudo-Eigenschaft hover werden diese Eigenschaften beim Überfahren des Elements mit der Maus überschrieben. Alternativ kann mittels JavaScript eine neue Klasse zugewiesen werden.

Setzen eines neuen Bezugpunktes (Bild 5)

Die neue Klasse beziehungsweise die Hover-Eigenschaft definiert den Zustand des Stop-Punktes. Alle Zwischenschritte werden automatisch interpoliert:

.myclass{ left: 20px;

-moz-transition:All 3s ease-in;}

.myclass:hover { left:100px;}

In diesem Beispiel wird die Zeit der Animation auf drei Sekunden gesetzt. Der Parameter All besagt, dass alle Eigenschaften animiert werden. In diesem Fall hätte stattdessen auch einfach left ausgereicht. Der letzte Parameter definiert den Zeitablauf. ease-in bedeutet eine einfache langsame Beschleunigung, während ease-out langsam abbremst. Möchte man langsam beschleunigen und sanft abbremsen, kommt ease-in-out zum Zug. Soll die Bewegung gleichbleibend sein, ist linear der richtige Wert. Es kann auch eine eigene Timing-Funktion mit Bezier-Kurven erstellt werden. Ein gutes Hilfsmittel ist Ceaser. Eine einfache Bezier-Kurve könnte dann so aussehen:

-moz-transition-timing-function:

cubic-bezier(0.025, 0.720, 0.975, 0.510);

Aus dem Kopf sind Bezier-Kurven nicht leicht zu definieren, daher sollten Sie Tools wie Ceaser zu Hilfe nehmen. Mit Transitions lassen sich die meisten CSS-Eigenschaften animieren.

CSS3-Animations

Transitions kennen nur einen Start- und einen Stop-Zustand des Objektes. Für komplexere Animationen wird eine richtige Keyframe-Animation benötigt, die mehrere Zustände des Elements im zeitlichen Verlauf abbilden kann:

#c1 {

-moz-animation: myanim 3s;

top:50px;

}

@-moz-keyframes myanim {

0% {left: 50px;}

25% {left: 300px;}

50% {left: 150px; top:450px;}

75% {left: 150px;}

100% {left: 300px;top: 250px;}

}

Die Anweisung animation definiert in diesem Beispiel den Namen der Keyframe-Animation und die Dauer einer Animations-Runde. Über die Eigenschaft @keyframes werden die einzelnen Keyframes definiert. Dabei wird der Name mit angegeben, der dann über animation angesprochen wird. Die Prozentangaben beziehen sich immer auf eine Animationsrunde. Animations kennt mehrere Eigenschaften mit denen die Animation beeinflusst werden kann:

-moz-animation-name: myanim;

-moz-animation-duration: 5s;

-moz-animation-timing-function: linear;

-moz-animation-delay: 2s;

-moz-animation-iteration-count: infinite;

-moz-animation-direction: alternate;

-moz-animation-play-state: running;

Die Eigenschaft animation-name definiert den Namen der Keyframe-Animation. Über animation-duration wird die Dauer einer animationsrunde gesetzt, während die animation-timing-function analog zu den Timingfunktionen der Transitions funktioniert. animations-delay verzögert den Start der Animations um die angegebene Zeit. Die Anzahl der Animationsrunden wird über animation-iteration-count bestimmt. Standardwert ist 1, das heißt, dass die Animation nur einmal durchlaufen wird. Der Wert infinite bewirkt, das die Animation durchlaufend wiederholt wird. Um eine Animation rückwärts laufen zu lassen, wird animation-direction mit reverse übergeben. Ob eine Animation überhaupt läuft oder pausiert ist, wird über die Anweisung animation-play-state definiert. Mit Keyframe-Animationen können komplexe Animationen erschaffen werden, da so gut wie jede CSS-Anweisung in die Animation eingebunden werden kann.

Fazit

Vieles, das früher mit komplexen JavaScript-Programmen oder Frameworks gelöst werden musste, last sich unter CSS3 mit wenigen Zeilen erledigen. Wenn CSS3 als Standard veröffentlicht ist und alle Browser den nativen Standard unterstützen, wird CSS3 dem Web-Entwickler viel Arbeit abnehmen. Bis dahin sollte man den Einsatz vorsichtig angehen und gegebenenfalls ein Javascript Fallback in Betracht ziehen.

Links zum Thema

Prefixfree bei GitHub

http://leaverou.github.com/prefixfree/

CSS Easing Tool Ceaser

http://matthewlein.com/ceaser/

CSS3 Demos und Tutorials

http://slodive.com/web-development/best-css3-animation-demos-tutorials/