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. Continue reading