HTML5- und CSS3-Templates und -Tutorials
Es wird nicht mehr allzu lange dauern, dann sind HTML5 und CSS3 der Code, den wir alle verwenden. Auch wenn derzeit noch nicht nicht alle Features von sämtlichen Browsern unterstützt werden, gibt es für einige der wichtigen und interessanten CSS3-Eigenschaften und neuen HTML5-Tags Unterstützung von den aktuellsten Versionen der modernen Browser (Chrome, Firefox und Safari). HTML5 wird mit aller Wahrscheinlichkeit die nächste größere HTML-Version sein und sie bietet neben neuen Funktionen auch eine Reihe neuer APIs.
HTML5/CSS3 Templates
CSS3 Theme
Info | Demo | Download Template
Dieses Theme verwendet diverse HTML5- und CSS3-Elemente, wie abgerundete Ecken und Box-Shadows, die sehr schön zu einem minimalistischen Design kombiniert sind. Es gibt genügend Raum für eigene Ergänzungen. Das Theme hat außerdem ein paar ganz nette Rollover-Effekte wie den pinkfarbenen Rahmen der Thumbnail-Felder für die Vorschau von Fotos und/oder Arbeitsproben. Außerdem gut: das Ajax- und PHP-basierte Kontaktformular.
Die typografisch gestaltete Hauptüberschrift wird beim Überfahren mit dem Mauszeiger vergrößert. Zudem ist die Hauptnavigation mit einem Dropdown-Menü ausgestattet.
Das Theme ist als Zweispalten-Layout mit einem Hauptbereich links und der Sidebar auf der rechten Seite.
HTML5 Basic Template
Info | Demo | Download Template
Dieses Basis-Template ist stark von einem im Smashing Magazine veröffentlichten Tutorial beinflusst, der weiter unten noch näher erläutert wird. Der Code ist an einigen Stellen allerdings verändert worden. Das Design bietet vier wählbare Farben, eine integrierte Tag-Cloud und sehr leicht anpassbaren CSS- und HTML5-Code. Dieses Template eignet sich damit hervorragend zum "Zerlegen" und Üben.
Cherry Blossoms HTML5 und CSS3 Template
Info | Demo | Download Template
Simpel, aber elegant präsentiert sich das Template Cherry Blossom. Hintergrund, Headergrafik und Farben sind individuell anzupassen. Auch hier gibt es ein Dropdown-Menü mit Hover-Effekten zur Anzeige des aktiven Menüpunkts.
Die Menüpunkte der ersten und zweiten Ebene können nach Belieben ergänzt werden.
Sehr nützlich für Blogs mit viel Informationen: Ein vierspaltiger Footer bietet Raum für die Blogroll und Links zu weiterführenden Seiten oder sonstigen Ressourcen.
Ampersand Solutions HTML5 Template
Info | Demo | Download Template
Ampersand Solutions ist eines der elegantesten Templates dieser Sammlung. Das Design bietet einige sehr schöne HTML5-Elemente.
Das Template ist als Zweispalten- und als Dreispalten-Layout verfügbar und somit sehr flexibel einsetzbar.
Beim Dreispaltenlayout sitzt das Kontaktformular in der rechten Sidebar. Allerdings ist es nicht mit einem Script hinterlegt - um es funktionstüchtig zu machen, müssen Sie selbst Hand anlegen.
Papery HTML5 und CSS3 Template
Info | Demo | Download Template
Das HTML5- und CSS3-Theme namens Papery arbeitet mit @font-face. Mit diesem CSS3-Feature können Sie beliebige Schriften einbinden, nicht nur die so genannten websicheren Fonts. Das Layout ist auf zwei Spalten festgelegt; Hintergrund-Textur und Header können jedoch ausgewechselt werden.
Auch hier ist die Hauptnavigation als erweiterbares Dropdown-Menü angelegt.
Der Footer dieses Templates ist dreispaltig und verwendet neben Texturen für den Hintergrund auch @Font-Face zum Gestalten der Schriften.
ThreeReasons HTML5 und CSS3 Template
Info | Demo | Download Template
ThreeReasons ist ein Template und ist eher für Firmen oder Online-Magazine gedacht und arbeitet mit CSS3-Spaltenlyout sowie der Eigenschaft gradient (Farbverlauf). Bei Browsern, die das nicht beherrschen - sprich IE-Versionen kleiner 9 - fallen die CSS-Stile "würdevoll" auf ältere Standards zurück, so dass das Design auch den Verlauf gut darstellt. Netter Effekt für längere Artikel: Ähnlich wie bei gedruckten Zeitschriften werden Texte im CSS3-Spalten-Layout automatisch umgebrochen.
Der Fuß ist vierspaltig und bietet viel Raum für Links auf andere Kategorien oder externe Websites.
Top-Themen können im Bereich unter dem Header mit Bildern und Vorspann angerissen werden. Eine schöne Lösung für Magazine oder Firmen beziehungsweise Freelancer mit mehreren Leistungsbereichen.
Free xHTML und CSS3 One-Page Template
Info | Demo | Download Template
Dieses Template eignet sich ideal für Single-Seiten-Layouts. Es ist flexibel erweiterbar und kann sehr einfach an persönliche Bedürfnisse angepasst werden. So lässt sich beispielsweise eine der Boxen sehr einfach in einen Image Slider zur Präsentation von Fotos oder Arbeitsproben verwandel.
Die Navigation ist angesichts des Einzelseitenlayouts im Hinblick auf die Anzahl der Links ein wenig begrenzt. Dafür sind die wenigen vorgesehen Links aber witzig angeordnet und mit einem schicken Rahmen versehen.
Die Contentboxen können jeweils Bilder und Text aufnehmen und sie sind natürlich auch mit border-radius dekoriert.
Newsy Multiple Column HTML5 und CSS3 Template
Info | Demo | Download Template
Wie der Name schon sagt, ist Newsy auf die Präsentation von Nachrichten beziehungsweise Zeitungsartikeln ausgerichtet. Das Template hat ein fortschrittliches CSS3-Mehrspaltenlayout, mit dem der automatisch umgebrochen wird - sogar im Blocksatz.
Dank des offenen Layouts kann die Sidebar in der Breite beliebig angepasst werden, so dass Bilder, Werbung oder Kurznachrichten sehr einfach in der Sidebar unterzubringen sind.
HTML5/CSS3 Ressourcen
Sickdesigner HTML5 Starter Pack
Dieses HTML5-Starter-Paket, bereit gestellt von Slickdesigner.com, erspart es Ihnen, immer wieder die gleichen langweiligen Grundeinstellungen vorzunehmen. Das zum Herunterladen angebotene Paket bietet eine saubere und gut organisierte Verzeichisstruktur, in die Sie entweder Ihre eigenen Dateien bequem einfügen oder die vorhandenen nach Ihren Wünschen abändern können (Sie müssen also nicht selbst Hand anlegen, wenn Sie das Grundgerüst nicht selbst anlegen wollen). Wer es individueller mag, kann die vorhandenen Dateien sehr einfach und flexibel an eigene Bedürfnisse anpassen.
Besondere Merkmale und Funktionen:
- Browser-übergreifend (einschließlich IE 6),
- Favicon
- Abfrage von Displays et cetera per
media queries - fertig zum Einsatz von
@font-face - valides HTML5
- CSS-Reset
- jQuery (Google CDN)
- Styhlesheets für IE6 und IE7 (für den Fall der Fälle!)
- wiederverwendbare CSS-Klassen
Was will man mehr? Probieren Sie es aus!
Less Framework
Less Framework kommt dank HTML5 und CSS mit wenig Code für verschiedene Display-Breiten aus. Die neueste Version 1.1 hat ein zehnspaltiges Layoutraster, das für eine Zeilenhöhe von 24 Pixel optimiert ist. Zudem bietet es ein paar typografische, dem Goldenen Schnitt folgende Grundeinstellungen, die in den vertikalen Fluss des Layouts passen.
Besonders geeignet ist Less Framework zum Erstellen von Websites, die für mobile Geräte wie Smart Phones optimiert sind. Unter Chrome, Safari, Firefox, Opera und Internet Explorer (7+) läuft es wunderbar. Mehrspaltige Layouts werden bei Verwendung eines Blackberry oder iPhone automatisch auf ein einspaltiges Layout reduziert. Einziger Nachteil: Auf dem iPad wurden Less-Framework-Layouts noch nicht getestet.
HTML5/CSS3 Tutorials
So erstellen Sie eine HTML5 iPhone App
Wie man ein Offline-Spiel im Stil von Tetris fürs iPhone kreiert, vermittelt dieses Tutorial. Die App läuft im iPhone-Browser Safari ohne mit dem Internet verbunden zu sein - egal, ob über 3G oder WiFi. Das Tutorial ist zwar speziell aufs iPhone ausgerichtet, die Techniken können jedoch auch auf andere Smart Phones übertragen werden.
Abwärts kompatibles Single-Seiten-Portfolio mit HTML5 und CSS3 erstellen
Dieses Tutorial zeichnet sich durch ausführliche und sorgfältige Erklärung des Lernstoffs aus. Jeder Code-Abschnitt wird separat erklärt, zudem geht der Autor auf neue HTML5-Elemente gründlich ein. An CSS3-Eigenschaften kommen Farbverläufe, Box-Schatten, abgerundete Ecken und Farbwahl zum Einsatz.
Auf in die Zukunft: Elegante Website mit HTML5 and CSS3 erstellen
Ein wenig lang, aber gründlich: Dieses Tutorial geht neben Erklärungen der reinen Funktion von HTML5- und CSS3-Eigenschaften auf die Bedeutung dieser Technik für die Webdesign-Branche ein. So sei es künftig nicht mehr unbedingt nötig, Mock-ups per Photoshop zu erstellen.
Realistisch oder nicht? Immerhin ist die Idee, Mock-Ups als HTML-Code statt als PSD-Datei zu erstellen eine Diskussion wert. Neben diesen eher philosophischen Fragen oder Ansichtssachen vermittelt das Tutorial fast ganz neben, wie Sie eine schöne Website mit HTML5 und CSS3 erstellen, die in meistverwendeten akutellen Browsern gleichermaßen funktioniert.
HTML5 und CSS3: Techniken, die Sie bald verwenden
Dieses Tutorial vermittelt, wie man ein Weblog mit HTML5 und CSS3 erstellt.
Design & Code für eine coole iPhone App Website mit HTML5
Auch hier geht es Design und Programmierung fürs iPhone HTML5 - dieses Mal jedoch eher als anwendungsartige Website denn als App. Die Struktur der Website wird mit HTML5 erstellt, während die neuen CSS3-Eigenschaften zum Aufpeppen der Optik eingesetzt werden.
Weitere interessante Fundstücke aus dem Netz ...
- HTML5 and The Future of the Web
- Web Design Iterations and Algorithms
- Make Your Mockup in Markup
- Sneaking into Future: 25 Ultra Modern Websites Using HTML5
- Future of Web Design 2010
Fazit
Voilà - hier haben Sie also eine solide Grundausstattung für den Einstieg und für weiteres Experimentieren mit den neuen HTML5- und CSS3-Techniken. Diese Liste erhebt keinen Anspruch auf Vollständigkeit. Kommentare mit weiteren Tipps, Themes oder Tutorials sind wie immer gern gesehen.
(mm),(tm)
Über Callum Chapman
Verwandte Artikel
– 3 Stimme(n)
