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

Info / Download

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

Info / Download

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

Tutorial

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

Tutorial

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

Tutorial

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

Tutorial

Dieses Tutorial vermittelt, wie man ein Weblog mit HTML5 und CSS3 erstellt.

Design & Code für eine coole iPhone App Website mit HTML5

Tutorial

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 …

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)

Callum ist ein freiberuflicher Grafikdesigner und Illustrator aus Cambridge in Großbritannien. Er ist der Kopf hinter dem Circleboxblog, ein design-orientiertes Weblog das Artikel, Inspiration, Tutorials und Texturen zum Download anbietet.

Sortiert nach:   neueste | älteste | beste Bewertung
Andreas
Gast
Andreas
6 Jahre 1 Monat her

Zitat: „Es wird nicht mehr allzu lange dauern, dann sind HTML5 und CSS3 der Code, den wir alle verwenden.“

Bestimmt. Nur wieviel „nicht mehr allzu lange“ in Jahren ist, ist vielleicht noch unklar. Aber in 5-10 Jahren sind wir sicherlich schlauer.

trackback

[…] Weitere interessante Beispiele und Informationen rund um CSS 3 und HTML 5 gibt es bei Dr. Web: HTML 5 & CSS 3: Tutorials, Tipps und Referenzen HTML5- und CSS3-Templates und -Tutorials […]

Melanie
Gast
6 Jahre 1 Monat her

ich stimme Andreas voll zu. Allerdings muss ich bemerken, dass viele Schüler jetzt schon ein bisschen in HTML eingeführt werden. Vorallem die, die viel Myspace nutzen. Meistens designen diese ihre Sites via HTML selbst. Sehr sinnvoll!

Jan
Gast
Jan
6 Jahre 1 Monat her

Auch 5 bis 10 Jahre sind noch eine optimistische Schätzung. Ich ärgere mich von früh bis spät mit den Unzulänglichkeiten der IE-Versionen herum, und wenn ich mir jetzt noch die „Gags“ von Html5 und Css3 dazudenke, dann wird mir ganz „schubberich“.
Meine Prognose: Html5 (und Css3) werden – wie ihre Vorgänger – bestenfalls in Teilen nutzbar sein, wenn man auf den kleinsten gemeinsamen Nenner in puncto Browserunterstützung setzen muss.

didim
Gast
6 Jahre 1 Monat her

nice, thanks

trackback

[…] HTML5- und CSS3-Templates und -Tutorials […]

Meissen
Gast
6 Jahre 1 Monat her

Vielen Dank für diese schöne Zusammenfassung.
Grüße aus Meißen

Urban
Gast
6 Jahre 1 Monat her

Jetzt ist wohl die Zeit gekommen, wo auch ich mal eine Seite in HTML 5 und CSS 3 gestalten und mich mit den neuen Elementen vertraut machen muss.
Allerdings befürchte ich auch, wie Jan erwähnt, dass davon nur Teile nutzbar sein werden. Bestenfalls für lokal genutzte Seiten in hochtechnisierten Ländern, wo moderne Computer / Smartphones etc. mit „modernen“ Browsern vorausgesetzt werden können.

Chris
Gast
3 Jahre 4 Monate her

Ich habe auf meine Blog ein Schritt für Schritt-Tutorial zu responsive HTML5-Webseiten mit CSS3-Features erstellt. Bei Interesse schaut doch einfach mal vorbei: http://www.lingulo.com/de/tutorials/css/how-to-build-a-html5-website-from-scratch

trackback

[…] Es wird nicht mehr allzu lange dauern, dann sind HTML5 und CSS3 der Code, den wir alle verwenden. HTML5 wird mit aller Wahrscheinlichkeit die nächste größere HTML-Version sein und sie bietet neben neuen Funktionen auch eine Reihe neuer APIs. Dieser Beitrag listet einige neue und freie CSS3- beziehungsweise HTML5-Templates zum Herunterladen und Experimentieren. Vertiefende Informationen und ausführliche Anleitungen bieten die Links zu Ressourcen und Tutorials im Netz. http://www.drweb.de/magazin/html5-und-css3-templates-und-tutorials/ […]

wpDiscuz