Animationen, Übergänge, neue Selektoren - mit CSS 3 lernen Browser viele neue Tricks. Wir zeigen zehn Anwendungen, die den Einsatz der neuen Funktionen demonstrieren.

Beinahe im Monatstakt erscheint einer der großen Browser - Internet Explorer, Firefox, Chrome und Safari - in einer neuen Version, die noch mehr CSS3 unterstützt als ihr Vorgänger. Längst ist der Marktanteil moderner Browser so groß, dass es sich lohnt, CSS3 zu lernen. Sparen Sie sich die Zeit, alten Internet Explorern mit Javascript und Browser-Hacks noch neue Tricks beizubringen.

Sorgen Sie einfach dafür, dass Ihre Seiten in diesen Browsern korrekt angezeigt werden, und investieren Sie Ihre Zeit lieber in die spannenden neuen Funktionen von CSS3. Dass die es in sich haben, zeigen Ihnen unsere folgenden Top 10 der CSS3-Tricks.

1. Fortschrittsbalken

Chris Coyier hat mit Hilfe von CSS3 und Javascript einen Fortschrittsbalken gestaltet (css-tricks.com/8518-css3-progressbars ). Diese Technik können Sie zum Beispiel verwenden, um Entwicklungen in einer Webanwendung anzuzeigen. Haben Sie den Checkout-Vorgang eines Online-Shops mit Ajax realisiert, könnten Sie mit einem Fortschrittsbalken anzeigen, wie weit es noch bis zum Abschluss der Bestellung ist.

Der Fortschrittsbalken kommt gänzlich ohne Grafiken aus. HTML-seitig besteht er aus einem div.meter, über dessen Breite Sie die maximale Breite des Balkens vorgeben. Darin befindet sich ein span, dessen per Inline-CSS angegebene Breite den Stand des Balkens widerspiegelt. Dementsprechend bedeutet

einen zu einem Viertel gefüllten Fortschrittsbalken.

Bei der grafischen Gestaltung macht Coyier Gebrauch von border-radius, um gerundete Ecken zu erzeugen. Außerdem verwendet er CSS3 box-shadow, damit div.meter leicht räumlich wirkt. Das Design der Balken hat Coyier mit nach innen zeigenden Box-Shadows sowie CSS3 Gradients realisiert. Bei dem im Bild der URL oben gezeigten gestreiften Balken hat Coyier mit CSS Generated Content und dem CSS-Attribut colorstop getrickst. Mit einer CSS3-Animation sorgt er dafür, dass die Streifen im Balken zumindest in Firefox ab Version 4 eine dezente Bewegung zeigen.

Den Balkenverlauf hat Coyier mit Hilfe der Javascript-Bibliothek jQuery animiert. So kompensiert er die Unfähigkeit aktueller Browser, Elemente animiert auf eine Breite von auto anwachsen zu lassen. Hintergrundbilder kommen nicht zum Einsatz, lassen sich aber bei Bedarf als Fallbacklösung für ältere Browser einbinden.

2. Animierter CSS3-Würfel

Mit Hilfe von 3D CSS Transforms hat Paul Hayes einen dreidimensionalen Würfel gestaltet, der sich dank jQuery mit den Pfeil-Tasten der Tastatur drehen lässt (www.paulrhayes.com/2009-07/animated-css3-cube-interface-using-3dtransforms/ ). Bislang funktioniert der Würfel ausschließlich in aktuellen Webkit-Browsern, also Safari (auch unter iOS) und Chrome. Dennoch bietet er interessantes Anschauungsmaterial.

Das HTML des Würfels ist simpel. Außenherum ein div#experiment, darin ein div#cube und innerhalb dessen sechs weitere div, je eines für jede Seite des Würfels. div#experiment fungiert dabei als virtuelle Kamera, die mit Hilfe von -webkit-perspective und -webkit-perspective-origin im Raum positioniert wird.

Die Würfelflächen ordnet Hayes mittels -webkit-transition und -webkit-transform-style an. Abschließend fügt er mit Javascript Event Listener hinzu, welche das Drücken der Pfeiltasten verarbeiten.

3. Mozilla-Planetarium

Als Schaufenster für all das, was mit Firefox technisch möglich ist, dient Hersteller Mozilla unter anderem die Microsite "The Planetarium" (mozillademos.org/demos/planetarium/demo.html ). Sie zeigt die Planeten des Sonnensystems sowie eine Reihe von Infos zu jedem Planeten.

Inhaltlich ist das wenig spannend, doch die technische Umsetzung gehört zum Feinsten jenseits von Flash. Die Microsite nutzt intensiv CSS3 Transitions, um Texte in das Bild hinein- und wieder hinausfliegen zu lassen. Auch die Planeten rutschen auf diese Weise ins Bild. Selbst Kleinigkeiten wie der Twitter-Knopf, der sich dreht und eine Beschriftung einblendet, wenn Sie mit dem Mauszeiger darübergleiten, sind bestaunenswert.

Das Planetarium sollten Sie am besten mit Firefox und der Erweiterung Firebug besuchen. So können Sie unter die Motorhaube schauen und sehen genau, wie die verschiedenen Effekte zustandekommen.

4. Boxen mit Schlagschatten

Sind der Würfel und das Planetarium eher experimenteller Natur, so können Sie die von Nicolas Gallagher entwickelten Schlagschatten (Dropshadows) sofort produktiv einsetzen (nicolasgallagher.com/css-drop-shadows-without-images/demo/ ). Dabei können Sie unter neun verschiedenen Effekten wählen und somit auch komplexere Designvorgaben erfüllen. Die Effekte funktionieren in allen aktuellen Browsern inklusive Internet Explorer ab Version 9. Da Schlagschatten in aller Regel keine funktionale Aufgabe erfüllen, schadet es auch kaum, wenn Sie sich nur wenige Gedanken darum machen, was aus älteren Browsern wird.

Ähnlich wie die CSS3-Fortschrittsbalken basieren auch die Dropshadows auf per CSS generiertem Content. Die dabei entstehenden Pseudoelemente werden absolut positioniert und erhalten mittels box-shadow einen Schlagschatten. Die verschiedenen Effekte erzielt Gallagher mittels CSS3-Transformationen. So dreht er die Pseudoelemente zum Beispiel um wenige Grad mit dem beziehungsweise gegen den Uhrzeigersinn, um die Ecken der Box so aussehen zu lassen, als wären sie nach oben geknickt.

5. Negative Ecken

Lea Verou nutzt CSS3 Gradients und multiple Hintergründe, um Boxen zum Beispiel abgeschrägte Ecken zu verleihen (leaverou.me/2011/03/beveled-corners-negative-border-radiuswith-css3-gradients/ ).

Sie gibt dazu derselben Box vier verschiedene Hintergründe, je einen für jede Ecke. Jeder Hintergrund besteht aus einem linearen CSS3-Verlauf, der um 45, 135, 225 beziehungsweise 315 Grad gedreht ist. Die eine Hälfte dieses Verlaufs ist transparent, die andere hat die Hintergrundfarbe der Box. Durch den transparenten Teil des Hintergrunds scheint der Hintergrund des Elementes durch, über dem die Box positioniert ist.

In einem weiteren Beispiel verwendet Lea Verou radiale Hintergründe, um nach innen gerundete Ecken zu erzeugen. Beide Beispiele finden Sie unter der oben genannten Webadresse. Die Griechin gibt in Ihrem Blog viele nützliche Tipps zu CSS3.

weiterlesen auf Seite 2