Buch lesen: «Webdesign mit CSS3»
Vorwort
HTML und CSS kann man gewissermaßen als Grundbausteine des Webs bezeichnen. Das ist seit den Anfängen des Webs so und wird – wie es ausschaut – auch noch in absehbarer Zukunft so sein. Auch auf die neuesten Herausforderungen weiß das Duo aus HTML – zwischenzeitlich als HTML5 bezeichnet – und CSS – zwischenzeitlich in der Version Level 3 – ein Antwort.
Vor allem die zunehmende Verbreitung von mobilen Endgeräten in Form von Smartphones und Tablets stellt neue Anforderungen an Entwickler von Web-Applikationen. Die Antwort heißt hier Responsive Webdesign. Das bedeutet, das Layout einer Web-Anwendung so anzulegen, dass sich die Ausgabe optimal an das Display des jeweiligen Endgeräts anpasst.
CSS3 findet immer breitere Unterstützung bei den Webbrowsern. Zeit also, sich mit den erweiterten Fähigkeiten der Cascading Stylesheets auseinanderzusetzen. Schon jetzt sind viele Features der noch in der Entwicklung befindlichen CSS3-Technologie nutzbar und erleichtern Webentwicklern die Arbeit ungemein.
Das Buch beschäftigt sich mit HTML5 und CSS3 und beschreibt anhand zahlreicher Code-Beispiele die neuen technischen Möglichkeiten und Verbesserungen, die die neuen Standards mit sich bringen. Es richtet sich an Webentwickler, die bereits Grundkenntnisse in HTML und CSS haben und in die praktische Arbeit mit den neuen Webstandards einsteigen möchten. Es stellt interessante neu CSS3-Features vor und liefert Beispiele für die konkrete Umsetzung von Responsive Webdesign.
Das erste Kapitel gibt einen Überblick über den neuen CSS3-Standard und zeigt, mit welchen neuen Funktionen Entwickler arbeiten können und wie der Stand der Umsetzung auf Seiten der Browser ist. Weiter geht es mit dreidimensionalen Bändern. Mit HTML5 und CSS3 lassen sich auf einfache Weise in eine Webseite 3D-Elemente einbauen. In dem Kapitel werden dreidimensionale Ribbons erläutert. In einem weiteren Kapitel geht es um CSS3-Animationen. Mit diesem neuen Feature lassen sich Elemente bewegen und animieren. Sie sind sicher eine der interessantesten Neuerungen in CSS3 und sie funktionieren nicht nur in neueren Browsern, sondern auch auf Smartphones. CSS3 Multiple Columns sind ein weiteres Interessantes Feature des neuen Standards und ein weiteres Thema dieses Buches. CSS3 bietet damit die Möglichkeit, mehrere Spalten auf einer Internetseite darzustellen, einfach über eine Definition im Stylesheet. Das Kapitel »SASS und Compass« zeigt, wie man schneller mit CSS-Preprozessoren entwickeln kann.
Das Web ist mittlerweile im mobilen Zeitalter angekommen und moderne Web-Anwendungen müssen für verschiedene Ausgabegeräte erstellt und optimiert werden. Der zweite Teil des Buches befasst sich daher schwerpunktmäßig mit dem Thema »Responsive Webdesign«.
Max Bold Chefredakteur web & mobile developer
CSS3
Web im neuen Gewand
CSS3 bringt viele neue Möglichkeiten um HTML Elemente auszuzeichnen und verwöhnt den Web-Entwickler sogar mit Animationen.
Von Alexander Ebner
Wir wollen uns die Neuigkeiten von CSS3 in diesem Artikel genauer ansehen. Sie eröffnen viele Gestaltungsmöglichkeiten, für die früher Javascript oder Grafiken benötigt wurden. Dazu zählen beispielsweise abgerundete Ecken und animierte Elemente.
Der Standard
CSS3 ist noch nicht final verabschiedet. Daher verwenden die Browserhersteller eigene Implementierungen. Diese werden mit einem Browser-spezifischen Prefix belegt. Folgendes Beispiel erzeugt abgerundete Ecken. Zu der eigentlichen CSS3 Eigenschaft border-radius kommen die Eigenschaften für Mozilla und Webkit hinzu:
order-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
Die Unterschiede beziehen sich nicht nur auf die Prefixe allein, CSS-Anweisungen können sich auch grundsätzlich unterscheiden, wie im folgenden Listing ersichtlich wird. Hier wird der border-radiusa für die rechte obere Ecke einmal standardkonform und einmal für Mozilla-Browser dargestellt:
border-top-right-radius:50px;
-moz-border-radius-topright:50px;
Die Web-Entwicklerin Lea Verou hat einen Javascript-Code entwickelt, der automatisch die fehlenden Prefixe an den CSS3-Eigenschaften anhängt. Das Skript kann frei über GitHub geladen werden. Mit PrefixFree braucht sich der Entwickler keine Gedanken mehr über Browser-Prefixe machen, da sie zur Laufzeit clientseitig eingebunden werden. Bereits mit Prefixe versehene Anweisungen werden von dem Skript ignoriert.
Nicht alle Browser verstehen alle CSS3-Eigenschaften. Der Internet-Explorer wurde erst in Version 9 fit für den neuen Standard gemacht. Das muss berücksichtigt werden, wenn es beispielsweise um Unternehmensseiten handelt. Nicht alle Besucher verwenden die neuesten Browser-Versionen. Entweder weil sie Anwender sind, die sich nicht sonderlich um Sicherheit und Updates scheren, oder weil Unternehmen aus den verschiedensten Gründen veraltete Browser-Versionen verwenden. Mit der Verabschiedung von CSS3 fallen auch die Browser-Prefixe weg und es ist zu hoffen das alle Browserhersteller den neuen Standard konform in ihre Browser implementieren. Daher sollte immer auch die standardkonforme Anweisung einer CSS-Eigenschaft mit angegeben werden, auch wenn sie von den Browsern noch nicht interpretiert wird. Genauso sollten Prefixe verwendet werden, auch wenn die aktuellen Versionen der Browser den Standard schon interpretieren. Ältere Versionen verstehen nur die Anweisungen mit dem entsprechenden Prefix, aber auch solche Browser sind noch unterwegs.
Rounded Corners
Abgerundete Ecken werden immer wieder gerne als Stilmittel eingesetzt. Früher aufwändig mit Grafiken als Hintergrund in ganzen Pixel-Arrays eingebaut, genügt heute eine CSS-Anweisung auf ein Element um runde Ecken zu erzeugen. Für die drei Container im folgenden Beispiel wurden verschiedene Anweisungen verwendet, um runde Ecken zu erzeugen:
#c1{ border-radius: 20px; }
#c2{ border-radius: 20px 40px 50px 10px; }
#c3{ border-top-right-radius:50px;
border-bottom-left-radius:90px 40px;}
Der erste Container erhält auf allen vier Ecken Rundungen mit dem Radius von 20 Pixeln. Der zweite Container bekommt auf allen vier Ecken unterschiedliche Rundungen. Die vier Parameter werden in der Reihenfolge links-oben, rechts-oben, rechts-unten und links-unten angegeben. Der letzte Container bekommt rechts oben eine Rundung von 50 Pixeln. Links unten werden zwei Parameter übergeben, was eine Asymmetrie in die Rundung einbaut. Das Ergebnis ist in Bild 1 zu sehen. Rounded Corners werden von IE9, Firefox, Chrome, Safari und Opera unterstützt.
Das Ergebnis der abgerundeten Ecken (Bild 1)
Schatten
Bisher wurden Schatten mit Bildern oder halbtransparenten PNG-Bildern realisiert. Mit CSS3 haben die Auszeichnungen box-shadow und text-shadow Einzug gehalten. Ersteres verschönert Elemente wie Div-Container, Formularfelder etc. mit einem Schatten, text-shadow versieht dagegen Schriften mit einem Schatten. Beide Auszeichnungen erwarten vier Parameter: X-Offset, Y-Offset, Kantenschärfe und Farbe. Die beiden Offsets verschieben den Schatten in Relation zum Objekt auf das der Schatten angewendet wird. Die Kantenschärfe sorgt für einen weichen Übergang zwischen Schatten und Fläche. Das folgende Beispiel erzeugt verschiedene Schatten an drei Containern und einem Text:
c1 { box-shadow:10px 10px 5px #000000; }
#c2 { box-shadow:-10px 10px 20px #000000;}
#c3 { box-shadow:inset 10px 10px 5px #000000;}
p {text-shadow:10px 10px 5px #000000;}
Der Schatten der ersten Box befindet sich rechts unten mit einem etwas schärferen Schattenverlauf. Der Schatten der zweiten Box geht nach links unten mit einem sehr weichen Schattenverlauf. Der dritte Schatten befindet sich innerhalb des Containers. Dazu kommt ein Text in einem Blocktext mit Schatten. Das Ergebnis sehen Sie in dem Bild (Bild 2).
Der Schattenwurf (Bild 2)
Transparenzen mit RGBA
RGBA steht für Red, Green, Blue und Alpha und ist ein Format um Farbinformationen zu definieren. Üblicherweise werden Farbwerte in CSS mittels Hexadezimal als #RRGGBB angegeben. In RGBA werden die Werte für die drei Grundfarben als Dezimalzahl mit einem Wert zwischen 0 und 256 angegeben. Der Alpha-Wert steht für die Transparenz und liegt im Bereich zwischen 0 und 1. Ein halbe Transparenz wird demnach mit 0.5 angegeben, während 1 bedeutet, dass das Element komplett undurchsichtig ist und 0 für vollständige Transparenz steht. In folgenden Beispiele haben die drei Container einen Alpha-Wert von 0.9, 0.5 und 0.1:
#c1{background-color: rgba(255,0,0,0.9); }
#c2{background-color: rgba(255,0,0,0.5); }
#c3{background-color: rgba(255,0,0,0.1); }
Das Ergebnis zeigt sich am deutlichsten vor einem Schachbrettmuster, wie in Bild 3.
Transparenzen vor einem Schachbrettmuster (Bild 3)
Im Gegensatz zu der Anweisung opacity bezieht sich hier der Alpha-Wert nur auf den Hintergrund des Containers, während bei opacity der komplette Container samt Inhalt diese Transparenz zugewiesen bekommt.
Transforms
Mit Transforms können HTML-Elemente transformiert werden. Unter anderem kann die Größe geändert und das Element gedreht, verschoben und verzerrt werden. Am Anschaulichsten ist das in folgendem Beispiel zu sehen:
#c1 { -moz-transform: rotate(-32deg); }
#c2 { -moz-transform: skew(29deg); }
#c3 { -moz-transform: scale(1.5); }
#c4 { left:550px; border: 1px solid red; }
#c5 { left:550px; -moz-transform:translate(20px); }
Der erste Container wird mittels rotate um –32 Grad gedreht. skrew verzerrt den zweiten Container um den angegebenen Winkel. Container drei wird auf die eineinhalbfache Größe aufgeblasen während Container fünf gegenüber dem roten Container vier durch translate um 20 Pixel verschoben wird, obwohl die absolute Position von 550 Pixeln vom linken Rand entfernt dieselbe ist (Bild 4).
Die vier Transformationen (Bild 4)
Alle Transforms legen ihren Bezugspunkt auf die Mitte des Elements. Diese kann auch verändert werden. So kann ein Element nicht nur um die Mittelachse gedreht werden, sondern die Drehachse um jeden beliebigen Punkt in Abhängigkeit zum Element gesetzt werden:
#c1 { -moz-transform: rotate(-20deg); }
#c2 { -moz-transform-origin: top left;
-moz-transform: rotate(-20deg); }
In diesem Beispiel wird bei dem linken Container eine Drehung um den Element-Mittelpunkt bewirkt, während der zweite Container um die linke obere Ecke gedreht wird (Bild 5).
Transitions
Transitions bieten eine einfache Möglichkeit der Animation. Streng genommen handelt es sich um eine Keyframe-Animation, die allerdings nur einen Start- und einen Stop-Punkt kennt. Zwischenschritte sind hier nicht möglich. Transitions definieren, welche CSS-Eigenschaften animiert werden, in welcher Zeit das geschieht und in welchem Zeitablauf. Dazu werden die Eigenschaften des Elements zum Start-Zeitpunkt definiert. Mit der Pseudo-Eigenschaft hover werden diese Eigenschaften beim Überfahren des Elements mit der Maus überschrieben. Alternativ kann mittels JavaScript eine neue Klasse zugewiesen werden.
Setzen eines neuen Bezugpunktes (Bild 5)
Die neue Klasse beziehungsweise die Hover-Eigenschaft definiert den Zustand des Stop-Punktes. Alle Zwischenschritte werden automatisch interpoliert:
.myclass{ left: 20px;
-moz-transition:All 3s ease-in;}
.myclass:hover { left:100px;}
In diesem Beispiel wird die Zeit der Animation auf drei Sekunden gesetzt. Der Parameter All besagt, dass alle Eigenschaften animiert werden. In diesem Fall hätte stattdessen auch einfach left ausgereicht. Der letzte Parameter definiert den Zeitablauf. ease-in bedeutet eine einfache langsame Beschleunigung, während ease-out langsam abbremst. Möchte man langsam beschleunigen und sanft abbremsen, kommt ease-in-out zum Zug. Soll die Bewegung gleichbleibend sein, ist linear der richtige Wert. Es kann auch eine eigene Timing-Funktion mit Bezier-Kurven erstellt werden. Ein gutes Hilfsmittel ist Ceaser. Eine einfache Bezier-Kurve könnte dann so aussehen:
-moz-transition-timing-function:
cubic-bezier(0.025, 0.720, 0.975, 0.510);
Aus dem Kopf sind Bezier-Kurven nicht leicht zu definieren, daher sollten Sie Tools wie Ceaser zu Hilfe nehmen. Mit Transitions lassen sich die meisten CSS-Eigenschaften animieren.
CSS3-Animations
Transitions kennen nur einen Start- und einen Stop-Zustand des Objektes. Für komplexere Animationen wird eine richtige Keyframe-Animation benötigt, die mehrere Zustände des Elements im zeitlichen Verlauf abbilden kann:
#c1 {
-moz-animation: myanim 3s;
top:50px;
}
@-moz-keyframes myanim {
0% {left: 50px;}
25% {left: 300px;}
50% {left: 150px; top:450px;}
75% {left: 150px;}
100% {left: 300px;top: 250px;}
}
Die Anweisung animation definiert in diesem Beispiel den Namen der Keyframe-Animation und die Dauer einer Animations-Runde. Über die Eigenschaft @keyframes werden die einzelnen Keyframes definiert. Dabei wird der Name mit angegeben, der dann über animation angesprochen wird. Die Prozentangaben beziehen sich immer auf eine Animationsrunde. Animations kennt mehrere Eigenschaften mit denen die Animation beeinflusst werden kann:
-moz-animation-name: myanim;
-moz-animation-duration: 5s;
-moz-animation-timing-function: linear;
-moz-animation-delay: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-moz-animation-play-state: running;
Die Eigenschaft animation-name definiert den Namen der Keyframe-Animation. Über animation-duration wird die Dauer einer animationsrunde gesetzt, während die animation-timing-function analog zu den Timingfunktionen der Transitions funktioniert. animations-delay verzögert den Start der Animations um die angegebene Zeit. Die Anzahl der Animationsrunden wird über animation-iteration-count bestimmt. Standardwert ist 1, das heißt, dass die Animation nur einmal durchlaufen wird. Der Wert infinite bewirkt, das die Animation durchlaufend wiederholt wird. Um eine Animation rückwärts laufen zu lassen, wird animation-direction mit reverse übergeben. Ob eine Animation überhaupt läuft oder pausiert ist, wird über die Anweisung animation-play-state definiert. Mit Keyframe-Animationen können komplexe Animationen erschaffen werden, da so gut wie jede CSS-Anweisung in die Animation eingebunden werden kann.
Fazit
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 -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)
Cascading Style Sheets – offizielle deutsche Übersetzung
Geschichte, alternative Formate, Designgrundsätze
http://people.opera.com/howcome/2006/phd/
SELFHTML
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
Der kostenlose Auszug ist beendet.
