Max Bold - Webdesign mit CSS3

{

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 einer HTML-Seite und geben Sie diesem eine Klasse test . In der CSS-Datei setzen Sie nun, wie in folgendem Listing zu sehen ist, die Breite des Rahmen auf 0 und definieren Sie einen 20px festen Rahmen. Zur besseren Darstellung wählen Sie für jede Rahmenseite eine eigene Farbe. Im Beispiel sind die Farben rot für oben, blau für recht, schwarz für unten und grün für links gewählt. Sie erhalten vier farbige Dreiecke. Fassen Sie nun zwei dieser Dreiecke zusammen, zum Beispiel das rote und das blaue Dreieck. Geben Sie beiden Dreiecken die graue Farbe für das Schattendreieck und setzen Sie die beiden verbleibenden Dreiecke auf transparent, so erhalten Sie die Form des Dreiecks das im ersten Band links verwendet wird:

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

www.w3.org/Style/CSS/

Cascading Style Sheets – offizielle deutsche Übersetzung

www.webmeister.at/Style/CSS/

Geschichte, alternative Formate, Designgrundsätze

http://people.opera.com/howcome/2006/phd/

SELFHTML

http://de.selfhtml.org/css/

Zen Garden

www.csszengarden.com/tr/deutsch/

Browserkompatibilität – CSS 4 You

www.css4you.de/browsercomp.html/standardbrowser/

W3C-CSS Validation Service

http://jigsaw.w3.org/css-validator/

CSS Tutorial

http://de.html.net/tutorials/css/

Текст предоставлен ООО «ЛитРес».

Прочитайте эту книгу целиком, купив полную легальную версию на ЛитРес.

Безопасно оплатить книгу можно банковской картой Visa, MasterCard, Maestro, со счета мобильного телефона, с платежного терминала, в салоне МТС или Связной, через PayPal, WebMoney, Яндекс.Деньги, QIWI Кошелек, бонусными картами или другим удобным Вам способом.