Max Bold - Webdesign mit CSS3

Links zum Thema

Prefixfree bei GitHub

http://leaverou.github.com/prefixfree/

CSS Easing Tool Ceaser

http://matthewlein.com/ceaser/

CSS3 Demos und Tutorials

http://slodive.com/web-development/best-css3-animation-demos-tutorials/

Ribbons mit CSS3

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