Bild vergrößern 937 1239 http://img1.magnus.de/3D-Effekte-mit-CSS-r937x1239-C-8daf30d7-50674229.jpg © Internet Magazin

© Internet Magazin

3D-Effekte mit CSS

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

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.

<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>

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

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

Bild vergrößern 561 186 http://img2.magnus.de/Die-f-nf-Bestandteile-des-3D-Ribbon--r561x186-C-a4943cbe-52036940.jpg Die fünf Bestandteile des 3D-Ribbon. © Internet Magazin

© Internet Magazin

Die fünf Bestandteile des 3D-Ribbon.

left: -10px

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

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