3D-Effekte mit CSS

Eine 3D-Wirkung entsteht durch die richtige Kombination von Licht und Schatten und durch das Hinzufügen von Perspektive. Klassischerweise setzt man hierfür auf Bilder oder Hintergrundbilder. Aber es gibt auch schöne Effekte ohne Bilder und rein per CSS.Der Verzicht auf Bilder hat mehrere Vorteile: einfachere Pflege, größere Flexibilität, bessere Performance. Außerdem sehen Bilder beim Skalieren oft unschön aus - was Ihnen mit bei CSS-Effekten nicht passiert.Nur Dinge, die herausragen, erzeugen einen Schatten. Umgekehrt heißt das: Was einen Schatten wirft, wird als herausragend empfunden. Deswegen sind Schatten ein wichtiges Mittel für 3D-Effekte - etwa über box-shadow. Zudem können Sie text-shadow für Texte nutzen, die wie eingraviert wirken oder als 3D-Säule hervorragen sollen. box-shadow lässt sich nicht nur für Schatten einsetzen, sondern auch, um Lichtflecken zu simulieren.Für Letzteres können Sie auch CSS-Farbverläufe nutzen; außerdem lassen sich mehrere Techniken kombinieren, wie Sie am Beispiel eines 3D-Buttons sehen werden. Auch mit den klassischen Mitteln von CSS 2 können Sie Elemente mit Perspektive erzeugen, etwa ein 3D-Ribbon.

3D-Ribbon

Ein 3D-Ribbon ist eine Art gefaltetes Band, das sich über ein anderes Element legt. Es besteht aus fünf Teilen:

• In der Mitte befindet sich der erhabene Teil des Bandes. Hier steht üblicherweise der Text.
• Rechts und links sieht man die zurückgesetzten Teile des Bandes.
• Das Band ist über ein kastenartiges Element gelegt, geht also an beiden Seiten des Kastens nach hinten. Für eine deutliche Wahrnehmung dieses Umstands sorgen zwei kleine Dreiecke, die dunkler eingefärbt sind.

Ein paar Elemente könnten Sie allerdings einsparen, wenn Sie die Pseudoelemente :after und :before benutzen.Das umfassende Element benötigt position: relative. Damit bildet es den Bezugspunkt für die weiteren Elemente, die über position: absolute angeordnet werden. Außerdem wird das umfassende Element um 100 Pixel von links verschoben. Innerhalb dieser 100 Pixel ist der zurückgesetzte Teil des Bandes zu sehen.

Jetzt kommt der vordere Teil des Bandes (Nummer 1): Er erhält eine Hintergrundfarbe, passende Ausmaße und wird absolut positioniert.

left: -10px verschiebt das Mittelteil um 10 Pixel nach links, denn er soll den zurückgesetzten Teil des Bandes um 10 Pixel überschreiten.Tipp: Ein positiver Wert bei left verschiebt ein Element von links weg, ein negativer hingegen nach links. Der linke Teil des Bandes (Nummer 2) soll ebenfalls 100 Pixel hoch sein wie der Mittelteil des Bandes, hat aber einen etwas dunkleren Farbton. Er wird absolut positioniert und um 10 Pixel nach unten verschoben.

z-index: 0 sorgt dafür, dass das Element hinter dem hervorstehenden Element angeordnet ist. Damit der Bandabschnitt links neben dem erhabenen Mittelteil angezeigt wird, wird er um seine eigene Breite (width: 999px) nach links verschoben (left: -999px). Die Darstellung der des rechten Bandabschnitts (Nummer 3) funktioniert nach demselben Prinzip.