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

Viele Menschen sehen HTML5 und CSS3 noch in weiter Ferne. Sie verschanzen sich hintern ihren veralteten Internetexplorern und wollen weiter in ihrer alten Flash Welt leben. Als stolzer Apple Gerätebesitzer darf ich mir täglich anhören, kann dein MacBook überhaupt Flash? Guck mal, mein Android braucht für Google Streetview keine App. Ich muss nur dieses Männchen auf die Karte… ahh mist, geht nicht. Und das ist der Punkt. Flash ist einfach nicht mehr zeitgemäß. Zumindest nicht im Kontext mobiler Geräte.

Google hat gestern ein sehr schönes Beispiel dafür geliefert, dass man Flash nicht mehr braucht. Zusammen mit der Firma Fi haben sie ein wunderschönes Buch mit dem Titel “20 Things I Learned About Browsers and the Web” herausgegeben, welches komplett auf Flash verzichtet. Auf den ersten Blick ist das nicht zu glauben. Seiten, die man mit Effekten umblättern kann, Abdunkeln des Bildschirms, bewegte Charaktere. Aber es stimmt. Das interaktive Buch kommt allein mit PHP, CSS3, HTML5 und Javascript aus.

Das Buch beschreibt auf 61 wirklich hübsch illustrierten Seiten verschiedene Technologien, Protokolle und interessante Erkenntnisse, die die Macher von Google Chrome durch ihre Arbeit erlangt haben. Wer schon immer mal wissen wollte, was “Cloud Computing” ist oder was diese “Web apps” sind, von denen alle reden, der sollte mal einen Blick in das Buch werfen.

Sehr schön ist auch das Feature, dass sich die URL ändert, ohne dass die Seite neu geladen wird. Um dieses Geheimnis zu ergrunden reicht ein Blick in Datei http://www.20thingsilearned.com/js/twentythings.history.js

window.history.pushState();

Das Buch nutzt viele Features der neuen Technologien. HTML5 wird unter anderem in dem Buch verwendet um sich den “state” des letzten Besuches mittels der Offline storage database zu merken. So bekommt man am Anfang die Möglichkeit an die Stelle zurückzukehren, wo man das Buch verlassen hat.

CSS3 wird z.B. beim Blättern des Buches verwendet oder bei den animierten Illustrationen. Ein Besuch des Buches lohnt sich auf jeden Fall. Die Zukunft ist ein Stück näher gerückt.

Danke Google!

Umblättern

Lang ist es her seit meinem letzten Blogeintrag und zwischenzeitig sah der Blog doch sehr rampuniert aus. Grund

dafür war eine Hackerattacke auf den Webhoster meines Vertrauens. Da ich viel um die Ohren hatte, gab hier lange nichts mehr neues und der kaputte Zustand hat sich nicht geändert.

Das soll sich jetzt wieder ändern! Im neuen Look ist der Blog jetzt wieder oben. Besuchern mit älteren Browsern kann ich nur dringend zu einem Update raten, dann ich stürze mich auf die Technologien, über die ich hie

r predige. HTML5, CSS3 usw. Ich werde die nächsten Tage noch mal ein paar nette Effekte für Besucher mit dem IE6 einbauen.

Ich wünsche viel Spaß auf der Seite und hoffe sie gefällt euch!

Für die Leute, die mit einem Internetexplorer gestraft sind, hier die Ansicht in einem guten Browser wie Firefox oder Safari, etc.

“Der King of Pop ist tot”… diese Nachricht verbreitete sich die letzten Tage sehr schnell durch die ganze Welt. Seitdem ist Michael Jackson wieder in aller Munde. Tribut zollen ihm viele Künstler und Kollegen.

Beim Surfen im Internet ist mir die folgende Seite aufgefallen, die sowohl vom Design, als auch von der Idee her sehr gut gemacht ist. “Eternal moonwalk” heißt die Seite und auf ihr kann man viele User Videos mit Moonwalk Versuchen bestaunen. Ein Besuch lohnt sich auf jeden Fall! Wer Spaß dran hat, sollte auf jeden Fall unten mal auf einen der Knöpfe neben der Audio Konsole klicken

http://www.eternalmoonwalk.com/

PS: Wenn wer Zeit und Lust hat… Wie lang ist der Moonwalk auf der Seite?

Eine wirklich schöne Idee zum “Internetsperre-Gesetz” haben sich Oliver Kels und Rob Vegas ausgedacht