Vieles, das früher mit komplexen JavaScript-Programmen oder Frameworks gelöst werden musste, last sich unter CSS3 mit wenigen Zeilen erledigen. Wenn CSS3 als Standard veröffentlicht ist und alle Browser den nativen Standard unterstützen, wird CSS3 dem Web-Entwickler viel Arbeit abnehmen. Bis dahin sollte man den Einsatz vorsichtig angehen und gegebenenfalls ein Javascript Fallback in Betracht ziehen.
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
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
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
.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.