CSS - Tricks

3D-Effekte mit CSS

Schluss mit platten Websites: Mit schicken 3D-CSS-Effekten wird Ihr Internetauftritt im wahrsten Sinne des Wortes herausragend.

3D-Effekte mit CSS

© Internet Magazin

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.
Für die Erstellung brauchen Sie sechs HTML-Elemente:
<div class="ribbon-wrapper"><div class="ribbon-front"><h1>
Ribbon</h1></div><div class="ribbon-edge-bottom
left"></div><div class="ribbon-edge-bottom
right"></div><div class="ribbon-back-left"></div><div class="ribbon-back-right"></div></div>

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.

.ribbon-wrapper {
position: relative;
left: 100px;
}

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

.ribbon-front {
background-color: #E21B25;
height: 100px;
width: 920px;
position: absolute;
left: -10px;
top: 0;
z-index: 2;
}

Die fünf Bestandteile des 3D-Ribbon.

© Internet Magazin

Die fünf Bestandteile des 3D-Ribbon.

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.

.ribbon-back-left {
position: absolute;
top: 10px;
left: -999px;
width: 999px;
height: 100px;
background-color: #D20B15;
z-index: 0;
}

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.

.ribbon-back-right {
position: absolute;
top: 10px;
left: 903px;
width: 999px;
height: 100px;
background-color: #D20B15;
z-index: 0;
}

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
Film Amazon Prime Instant Video Warner Bros Emily Browning
Vorschau auf Film- und Serien-Highlights

Prime Instant Video lockt im Oktober mit Highlights wie "Sucker Punch", "Fifty Shades of Grey", "Spotlight" und der zweiten Staffel von "Ash vs. Evil…