Читать книгу Webdesign mit CSS3 - Max Bold - Страница 5

Оглавление

Ribbons mit CSS3

Dreidimensionale Bänder

Mit HTML5 und CSS3 lassen sich auf einfache Weise in eine Webseite 3D-Elemente einbauen. In dem Artikel werden dreidimensionale Ribbons erläutert.

Von Bettina Zimmermann

Einer der vorherrschenden Trends im derzeitigen Webdesign ist die räumliche Darstellung in 3D. Tiefe zu erzeugen und damit einen dreidimensionalen Effekt zu erschaffen, verleiht einer Webseite mehr Lebendigkeit. Bisher wurden diese Elemente oft in Bildbearbeitungs-programmen wie Photoshop erstellt und als Grafik in eine Webseite eingefügt. Mit der Verwendung von CSS und insbesondere CSS3 ist es heute aber auch möglich, diese Effekte rein durch Programmierung und Rendering im Browser zu erreichen. Somit können Sie eine größere Unabhängigkeit von Zusatzprogrammen und eine höhere Flexibilität durch das einfache Verändern von CSS-Eigenschaften wie zum Beispiel Farbe und Größe erreichen. Dieser Workshop zeigt Ihnen, wie Sie mit Hilfe von CSS3-Stylesheets dreidimensionale Bänder erstellen können, die Ihrer Webseite eine attraktive 3D Wirkung verleihen (Bild 1).

Verschiedene Typen von Ribbons erzeugt mit CSS3 (Bild 1)

Für den Workshop brauchen Sie lediglich einen Texteditor und einen aktuellen Browser. Für die dargestellten Beispiele sind neuere Browser notwendig, die auch CSS3-Elemente darstellen können, da zum Beispiel die Schatten sonst nicht dargestellt werden. Die folgenden Browser sollten Ihnen die gewünschten Ergebnisse liefern: Internet Explorer 8 und 9 sowie die aktuellen Versionen von Firefox, Chrome, Safari und Opera. Die Graphik in Bild 2 zeigt Ihnen wie ein Ribbon aufgebaut ist.

Aus diesen Bestandteilen setzt sich ein Band(Ribbon) zusammen (Bild 2)

Im Beispiel wird ein großes Rechteck mit abgerundeten Ecken als Hintergrund verwendet. Der Ribbon legt sich dann, wie die Übersetzung ins Deutsche bereits zeigt, als Band um den Kasten. Dabei handelt es sich einfach um ein Rechteck, das auf beiden Seiten über den Hintergrundkasten übersteht. Für die dreidimensionalen Effekte sorgen Schatten um die Rechtecke und dunkle Dreiecke an den Knickstellen. Sie vermitteln den Eindruck von räumlicher Tiefe.

Wie wird eine solche Seite nun konkret gebaut? Im Folgenden können Sie die einzelnen Schritte nachvollziehen.

Starten Sie mit dem Entwurf einer HTML-Seite und einer CSS-Datei. Die folgende HTML-Seite stellt Ihnen den Hintergrundkasten für die Ribbons bereit. Sie bindet dazu das Stylesheet myStyle.css ein, in dem die CSS-Formatierungen für den Kasten und natürlich auch für die Ribbons ausgeführt werden. Der weitere Inhalt der HTML-Seite und der CSS-Datei werden anschließend Schritt für Schritt entwickelt:

In der CSS-Datei wird das body-Tag aus der HTML-Datei näher spezifiziert und dadurch der Kasten mit all seinen Eigenschaften wie Breite, Hintergrundfarbe und Schriftart definiert. Die runden Ecken werden durch das Attribut border-radius erreicht. Der Schatten um den Kasten wird durch box-shadow definiert. Attribute mit einem Prefix wie -moz (Mozilla) beziehungsweise -webkit (auf Webkit basierende Browser) sind browserspezifisch. Durch die Verwendung der Standardattribute und zusätzlich der browserspezifischen Attribute wird erreicht, dass die Elemente in verschiedenen Browsern richtig angezeigt werden:

/* CSS Document */

html {

background: #ddd;

}

Body {

margin: 30px auto;

padding: 20px;

width: 40%;

background: #fff;

font-family: 'trebuchet MS', Arial, helvetica;

-moz-border-radius: 10px;

border-radius: 10px;

-moz-box-shadow: 0 0 10px #555;

-webkit-box-shadow: 0 0 10px #555;

box-shadow: 0 0 10px #555;

}

Nachdem Sie den Hintergrund für die Ribbons vorbereitet haben, können Sie jetzt das Band einbauen. Das Ergebnis der nächsten Zeilen sehen Sie in Bild 3.

Ein Rechteck wird über den Kasten gelegt (Bild 3)

In der HTML-Seite wird dafür lediglich ein einfaches -Element eingebaut, welches Textabsätze festlegt. Über die Definition der Klasse rib1 werden dann in der CSS-Datei die Eigenschaften des ersten Bandes und entsprechend aller weiteren Bänder beschrieben:

Hier hat die Klasse .rib1 die folgenden Eigenschaften: Eine zentrierte Darstellung, eine relative Positionierung und eine margin, die den Außenabstand des Elements von 30px nach oben und unten und -30px nach links und rechts definiert. Durch diese margin wird der gewünschte Effekt erzielt, dass die Ränder des Bandes überstehen. Weiter wird der padding definiert: er erzielt einen Innenabstand des Texts im - Element von 10px nach oben und unten und 0px nach rechts und links. Für die Hintergrundfarbe des Bandes ist ein helles Gelb gewählt (# FFFF80) und die Höhe des Textelements ist mit 20px festgelegt:

.rib1 {

text-align: center;

position: relative;

margin: 30px -30px 30px -30px;

padding: 10px 0;

background: #FFFF80;

height:20px;

}

Das erste Band können Sie in Ihrer Webseite nun schon sehen, jetzt werden noch die Elemente zur Erzeugung des dreidimensionalen Effekts hinzugefügt: Zuerst geben Sie dem Band einen Schatten. Dies wird durch das Attribut box-shadow erreicht. Auch hier gibt es wieder die gesonderten Prefixes für Mozilla und Webkit-Browser. Im dargestellten Fall handelt es sich um einen Außenschatten, er kann durch 5 Eigenschaften definiert werden. Alle Werte werden dabei in px (Pixel angegeben). Die erste Eigenschaft bewirkt einen Schatten nach rechts (positive Zahl) oder links (negative Zahl), die zweite einen Schatten nach oben (negative Zahl) oder unten (positive Zahl). Die dritte optionale Eigenschaft erzielt einen verschwommenen Schatten um den gesamten Kasten herum. Je größer die Zahl, desto verschwommener ist der Schatten. Die vierte, ebenfalls optionale Eigenschaft, gibt an wie weit der Schatten gestreut wird. Schließlich gibt es noch die Möglichkeit die Farbe des Schattens anzugeben. Der unten beschriebene Schatten hat nur einen verschwommenen Schatten um das Element herum und eine Farbangabe, alle anderen Eigenschaften sind Null oder nicht angegeben.

-moz-box-shadow: 0 0 10px #555;

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