Wie gestalte ich eine Webseite mit HTML 5 – Teil 2

Im 1. Teil haben wir uns ja bereits um die Seitenstruktur gekümmert. Nun fangen wir an, dem Ganzen ein Aussehen zu verpassen mit Hilfe von CSS3. Zur Zeit gibt es 4 große Rendering Bibliotheken, die das Verwenden von CSS3 schon ermöglichen. Das wären Webkit für Safari und Google Chrome, Presto für Opera und Gecko für Mozilla Firefox. Der Internet Explorer wird ab Version 9  mit Trident auch endlich im Internet von Heute ankommen.

Zur Zeit kocht jede Rendering Bibliothek noch ihr eigenes Süppchen bei der Umsetzung der CSS3 Spezifikationen. Deshalb muss man die CSS3 Tags mit einem Präfix versehen. Bei Webkit -webkit, bei Presto -o und bei Gecko -moz. Bei der Umsetzung von CSS3 ist Webkit zur Zeit am weitesten. Für Firefox gibt es die in diesem Tutorial verwendeten CSS Transitions noch nicht. Deshalb sind einige Effekte nur mit der Firefox Beta möglich. Die CSS3 Animation funktioniert nur mit Webkit Browsern.

In diesem Tutorial werde ich noch nicht das CSS3 Font-Face Feature verwenden, sondern Google Webfonts. Diese binde ich oben in meinem Dokument ein. Des weiteren lege ich noch für meinen HTML body ein Hintergrundbild und eine Farbe fest. Hierfür verwende ich das neue rgba Farbmodell. Die ersten drei Parameter sind die rgb Farbwerte und der letzte der Alphakanal.

@charset "UTF-8";
@import url(http://fonts.googleapis.com/css?family=Lobster);
@import url(http://fonts.googleapis.com/css?family=Josefin+Sans);
@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);

body {
background: rgba(225,210,183,1) url(images/background.png) repeat;
font-size:14px;
font-family:Arial, Helvetica, sans-serif;
}

Auf die neuen HTML5 Tags, kann ich genauso wie z.B. auf h1 Überschriften in meinem CSS zugreifen.

header {
margin-top:50px;
}

Mein Logo möchte ich animieren. Dieser Effekt steht zur Zeit leider nur in der Webkit Library zur Verfügung.

/* Animationen */
@-webkit-keyframes fallDown {
from {
top:-200px;
}
to {
top:0px;
}
}
#logo {
background:url(images/background_logo.png) no-repeat;
width:511px;
height:151px;
font-family: 'Josefin Sans';
font-size:2em;
color: rgba(68,71,85,1);
}
#logo p {
margin:5px 0 0 80px;
}
#logo img {
margin:40px 0 0 50px;
-webkit-animation-name: fallDown;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count:1;
-webkit-animation-timing-function: ease-out;
position:relative;
}

Animationen kann ich mit dem @-webkit-keyframes Keyword definieren. Meine Animation gibt an, dass das Element seine Position von top: -200 px zu top: 0px verändern soll. Beim Aufruf kann man noch die Dauer (duration), die Anzahl der Wiederholungen (iteration-count) und die timing-function angeben. Mehr Informationen findet man hier.

Kommen wir zu unserem Menu. Dieses soll eine Drop Down Funktionalität haben. Dieses können wir mit Hilfe von Pseudoselekotren in CSS erledigen. Sobald ein Listenelement „gehovert“ wird, wird das Unter-Element ul, so fern es existiert, sichtbar mit Hilfe von display:block. Möchten wir beim hovern z.B. einen sanften Farbübergang der Hintergrundfarbe haben, müssen wir in dem Normalzustand des Elementes eine Transition definieren. Bei diesem Beispiel sieht man schön die verschiedenen Rendering Bibliotheken (-moz,-webkit,-o).  Des weiteren sieht man hieran die unterschiedlich weiten Implementierungen und eine gewisse Inkonsistenz. Opera benutzt für Transitionen sein -o Prefix, für den border-radius nicht. Außerdem muss man explizit angeben, dass sich die Hintergrundfarbe (background-color) ändert.

nav ul li:hover > ul {
display:block;
}
nav ul li ul li a {
background:none;
-webkit-border-radius:0px;
-webkit-transition: background .5s linear;
-moz-border-radius:0px;
-moz-transition: background .5s linear;
border-radius:0px;
-o-transition: background-color .5s linear;

}
nav ul li ul li a:hover {
background: rgba(255,255,255,1);
color:#666;
}

Schauen wir uns nun unseren Content Bereich mit den zwei „Spalten“ section und aside an. Um dieses ohne umständliches „gefloate“ umzusetzen kann man das Content Element auf display:table und die Unterelemente auf display:table-cell setzten. Das ist viel eleganter und einfacher.

#content {
background: rgba(108,149,61,0.6);
margin-top:20px;
display:table;
border-top:rgba(73,48,24,0.5) 1px solid;
border-bottom:rgba(73,48,24,0.5) 1px solid;
-webkit-border-radius:20px;
-moz-border-radius:20px;
border-radius:20px;
}
section {
display:table-cell;
width:500px;
padding:20px;
}
aside {
width:270px;
display:table-cell;
padding-right:10px;
}

Fertig ist unsere erste Webseite mit HTML5 und CSS3.

Das gesamte Stylesheet gibt es hier.

DEMO DOWNLOAD

Be Sociable, Share!

Comments are closed.