-webkit-box-shadow: 0 0 10px #555;
box-shadow: 0 0 10px #555;
Zuletzt fehlen dem Band noch die beiden kleinen Dreiecke links und rechts am Rand des Hintergrundkastens. Sie machen einen großen Teil der dreidimensionalen Wirkung des Bandes aus. Diese Dreiecke werden mit Hilfe der CSS Eigenschaft border erstellt.
Für das erste Band brauchen Sie links und rechts jeweils ein kleines Dreieck. Diese werden durch die Pseudoelemente :after und :before eingefügt. Diese Pseudoelemente bewirken, dass vor ein anderes Element ein bestimmter Inhalt eingefügt werden kann. Den Source Code der Pseudoelemente und der Dreiecke im CSS-File sehen Sie im folgenden Listing:
.rib1:after, .rib1:before
{
content: '';
position: absolute;
border-style: solid;
width: 0;
bottom: -10px;
border-width: 5px;
}
.rib1:before
{
border-color: #222 #222 transparent transparent;
left: 0;
}
.rib1:after
{
border-color: #222 transparent transparent #222;
right: 0;
}
Zuerst werden hier die gemeinsamen Attribute von :after und :before gesetzt: der Inhalt wird leer gelassen, die Postion auf absolut gesetzt, das Element erhält einen durchgezogenen Rahmen mit 5px Breite und wird durch bottom -10px um 10 Pixel nach unten verschoben. Das Pseudoelement selbst erhält die Breite 0. Das Dreieck links hat eine andere Ausrichtung als das Dreieck rechts, daher werden diese gesondert definiert. Das linke Dreieck erhalten Sie dadurch, dass Sie für das Pseudoelement :before das Attribut border-color auf die folgenden Werte setzen: oben und rechts wird es grau (#222), unten und links durchsichtig. Wenn Sie alle HTML und CSS Teile eingefügt haben ist Ihr erstes Band aus dem Beispiel fertig.
Mit border zum Dreieck
Border ist der Rahmen eines Elements. Wie kann man nun damit ein Dreieck bauen? Zum besseren Verständnis machen Sie einmal einen kleinen Test. Nehmen Sie einen Textbereich
.test {
border: 20px solid;
border-color: red blue black green;
width: 0;
}
Im Folgenden werden die Änderungen erläutert, die Sie einbauen müssen, um die Varianten der Bänder zu erhalten. Beim Band vom Typ 2 sind die Dreiecke, die die Schatten darstellen, oben eingefügt und nicht unten wie beim Typ 1. Um dies zu erreichen müssen Sie im Vergleich zum Typ 1 kleine Änderungen in den Pseudoelementen :before und :after einbauen:
.rib2:before
{
border-color: transparent #222 #222 transparent;
left: 0;
}
.rib2:after
{
border-color: transparent transparent #222 #222;
right: 0;
}
Wenn Sie die Definition mit dem Band vom Typ 1 vergleichen erkennen Sie eine Änderung bei der border-color-Definition. Sehen Sie sich dazu erneut die bunten Dreiecke an. Beim Band vom Typ 2 wird für das Pseudoelement :before, rechts und unten die graue Farbe gesetzt, oben und links wird transparent. Das heißt, von den bunten Dreiecken werden das blaue und das schwarze verwendet. Das Dreieck auf der rechten Seite des Bandes ist oben und rechts transparent, unten und links grau. Das ergibt grün und schwarz aus den bunten Dreiecken. Bei den gemeinsamen Attributen von .rib2:before und .rib2: after wird das Attribut bottom auf 40 px gesetzt, um die richtige Position des Dreiecks zu erreichen, das in diesem Fall ja über dem Band liegt. Ansonsten ist die Definition der beiden Bänder gleich.
Das Band vom Typ 3 entspricht dem Typ 1 mit einem zusätzlichen Knick und Fortsetzung des Bandes auf der linken Seite. Dies erreichen Sie indem Sie ein kurzes weiteres Stück Band links vom Band einfügen. Sehen Sie sich dazu das folgende Listing an:
.rib3left
{
text-align: center;
position:absolute; top:185px;
left:312px; width:100px; height:150px
margin: 0 -40px 40px -40px;
padding: 10px 0;
background: #FFFF80;
-moz-box-shadow: -1px 0 10px #555;
-webkit-box-shadow: -1px 0 10px #555;
box-shadow: -1px 0 10px #555;
height:20px;
}
In der HTML-Seite wird dieses kleine Stück vor dem Band vom Typ 3 eingefügt um die richtige Perspektive zu erreichen:
Auf diese Weise liegt das dritte Band über dem kleinen Stück.
Fazit
Es wurde gezeigt, wie einfach es ist mit HTML und CSS dreidimensionale Bänder zu erstellen – ganz ohne eingebaute Bilddateien zu verwenden. CSS ermöglicht es Ihnen, ohne großen Aufwand in der HTML-Seite, die dreidimensionale Wirkung der Bänder zu erreichen. Würden Sie die Bänder nicht mit CSS im Stylesheet erstellen, sondern dazu in Bildbearbeitungsprogrammen vorgefertigte Bilder einbauen, so müssten Sie weitere HTTP Anfragen in die HTML-Seite einbauen und die Seite wird dadurch langsamer aufgebaut. Ein weiterer Vorteil von komplett im Code erstellten Elementen ist die einfache Möglichkeit Eigenschaften wie die Farbe oder sonstiges Aussehen der Bänder zu ändern. Insbesondere seit CSS3, welches im Beispiel die Schatten ermöglicht, sind die beschriebenen 3D-Bänder eine schöne Gestaltungsmöglichkeit für Ihre HTML-Seite.
Links zum Thema
W3C: Cascading Style Sheets (englisch)
Cascading Style Sheets – offizielle deutsche Übersetzung
Geschichte, alternative Formate, Designgrundsätze
http://people.opera.com/howcome/2006/phd/
SELFHTML
Zen Garden