Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Callum Chapman 26. Juli 2010

HTML5- und CSS3-Templates und -Tutorials

Es wird nicht mehr all­zu lan­ge dau­ern, dann sind HTML5 und CSS3 der Code, den wir alle ver­wen­den. Auch wenn der­zeit noch nicht nicht alle Features von sämt­li­chen Browsern unter­stützt wer­den, gibt es für eini­ge der wich­ti­gen und inter­es­san­ten CSS3-Eigenschaften und neu­en HTML5-Tags Unterstützung von den aktu­ells­ten Versionen der moder­nen Browser (Chrome, Firefox und Safari). HTML5 wird mit aller Wahrscheinlichkeit die nächs­te grö­ße­re HTML-Version sein und sie bie­tet neben neu­en Funktionen auch eine Reihe neu­er APIs.

HTML5/CSS3 Templates

CSS3 Theme


Info | Demo | Download Template

Dieses Theme ver­wen­det diver­se HTML5- und CSS3-Elemente, wie abge­run­de­te Ecken und Box-Shadows, die sehr schön zu einem mini­ma­lis­ti­schen Design kom­bi­niert sind. Es gibt genü­gend Raum für eige­ne Ergänzungen. Das Theme hat außer­dem ein paar ganz net­te Rollover-Effekte wie den pink­far­be­nen Rahmen der Thumbnail-Felder für die Vorschau von Fotos und/oder Arbeitsproben. Außerdem gut: das Ajax- und PHP-basier­te Kontaktformular.

Die typo­gra­fisch gestal­te­te Hauptüberschrift wird beim Überfahren mit dem Mauszeiger ver­grö­ßert. Zudem ist die Hauptnavigation mit einem Dropdown-Menü aus­ge­stat­tet.

Das Theme ist als Zweispalten-Layout mit einem Hauptbereich links und der Sidebar auf der rech­ten Seite.

HTML5 Basic Template

Info | Demo | Download Template

Dieses Basis-Template ist stark von einem im Smashing Magazine ver­öf­fent­lich­ten Tutorial bein­flusst, der wei­ter unten noch näher erläu­tert wird. Der Code ist an eini­gen Stellen aller­dings ver­än­dert wor­den. Das Design bie­tet vier wähl­ba­re Farben, eine inte­grier­te Tag-Cloud und sehr leicht anpass­ba­ren CSS- und HTML5-Code. Dieses Template eig­net sich damit her­vor­ra­gend zum “Zerlegen” und Üben.

Cherry Blossoms HTML5 und CSS3 Template

Info | Demo | Download Template

Simpel, aber ele­gant prä­sen­tiert sich das Template Cherry Blossom. Hintergrund, Headergrafik und Farben sind indi­vi­du­ell anzu­pas­sen. Auch hier gibt es ein Dropdown-Menü mit Hover-Effekten zur Anzeige des akti­ven Menüpunkts.

Die Menüpunkte der ers­ten und zwei­ten Ebene kön­nen nach Belieben ergänzt wer­den.

Sehr nütz­lich für Blogs mit viel Informationen: Ein vier­spal­ti­ger Footer bie­tet Raum für die Blogroll und Links zu wei­ter­füh­ren­den Seiten oder sons­ti­gen Ressourcen.

Ampersand Solutions HTML5 Template

Info | Demo | Download Template

Ampersand Solutions ist eines der ele­gan­tes­ten Templates die­ser Sammlung. Das Design bie­tet eini­ge sehr schö­ne HTML5-Elemente.

Das Template ist als Zweispalten- und als Dreispalten-Layout ver­füg­bar und somit sehr fle­xi­bel ein­setz­bar.

Beim Dreispaltenlayout sitzt das Kontaktformular in der rech­ten Sidebar. Allerdings ist es nicht mit einem Script hin­ter­legt – um es funk­ti­ons­tüch­tig zu machen, müs­sen Sie selbst Hand anle­gen.

Papery HTML5 und CSS3 Template

Info | Demo | Download Template

Das HTML5- und CSS3-Theme namens Papery arbei­tet mit @font-face. Mit die­sem CSS3-Feature kön­nen Sie belie­bi­ge Schriften ein­bin­den, nicht nur die so genann­ten web­si­che­ren Fonts. Das Layout ist auf zwei Spalten fest­ge­legt; Hintergrund-Textur und Header kön­nen jedoch aus­ge­wech­selt wer­den.

Auch hier ist die Hauptnavigation als erwei­ter­ba­res Dropdown-Menü ange­legt.

Der Footer die­ses Templates ist drei­spal­tig und ver­wen­det 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 arbei­tet mit CSS3-Spaltenlyout sowie der Eigenschaft gradient (Farbverlauf). Bei Browsern, die das nicht beherr­schen – sprich IE-Versionen klei­ner 9 – fal­len die CSS-Stile “wür­de­voll” auf älte­re Standards zurück, so dass das Design auch den Verlauf gut dar­stellt.  Netter Effekt für län­ge­re Artikel:  Ähnlich wie bei gedruck­ten Zeitschriften wer­den Texte im CSS3-Spalten-Layout auto­ma­tisch umge­bro­chen.

Der Fuß ist vier­spal­tig und bie­tet viel Raum für Links auf ande­re Kategorien oder exter­ne Websites.

Top-Themen kön­nen im Bereich unter dem Header mit Bildern und Vorspann ange­ris­sen wer­den. Eine schö­ne Lösung für Magazine oder Firmen bezie­hungs­wei­se Freelancer mit meh­re­ren Leistungsbereichen.

Free xHTML und CSS3 One-Page Template

Info | Demo | Download Template

Dieses Template eig­net sich ide­al für Single-Seiten-Layouts. Es ist fle­xi­bel erwei­ter­bar und kann sehr ein­fach an per­sön­li­che Bedürfnisse ange­passt wer­den. So lässt sich bei­spiels­wei­se eine der Boxen sehr ein­fach in einen Image Slider zur Präsentation von Fotos oder Arbeitsproben ver­wan­del.

Die Navigation ist ange­sichts des Einzelseitenlayouts im Hinblick auf die Anzahl der Links ein wenig begrenzt. Dafür sind die weni­gen vor­ge­se­hen Links aber wit­zig ange­ord­net und mit einem schi­cken Rahmen ver­se­hen.

Die Contentboxen kön­nen jeweils Bilder und Text auf­neh­men und sie sind natür­lich auch mit border-radius deko­riert.

Newsy Multiple Column HTML5 und CSS3 Template

Info | Demo | Download Template

Wie der Name schon sagt, ist Newsy auf die Präsentation von Nachrichten bezie­hungs­wei­se Zeitungsartikeln aus­ge­rich­tet. Das Template hat ein fort­schritt­li­ches CSS3-Mehrspaltenlayout, mit dem der auto­ma­tisch umge­bro­chen wird – sogar im Blocksatz.

Dank des offe­nen Layouts kann die Sidebar in der Breite belie­big ange­passt wer­den, so dass Bilder, Werbung oder Kurznachrichten sehr ein­fach in der Sidebar unter­zu­brin­gen sind.

HTML5/CSS3 Ressourcen

Sickdesigner HTML5 Starter Pack

Info / Download

Dieses HTML5-Starter-Paket, bereit gestellt von Slickdesigner.com, erspart es Ihnen, immer wie­der die glei­chen lang­wei­li­gen Grundeinstellungen vor­zu­neh­men. Das zum Herunterladen ange­bo­te­ne Paket bie­tet eine sau­be­re und gut orga­ni­sier­te Verzeichisstruktur, in die Sie ent­we­der Ihre eige­nen Dateien bequem ein­fü­gen oder die vor­han­de­nen nach Ihren Wünschen abän­dern kön­nen (Sie müs­sen also nicht selbst Hand anle­gen, wenn Sie das Grundgerüst nicht selbst anle­gen wol­len). Wer es indi­vi­du­el­ler mag, kann die vor­han­de­nen Dateien sehr ein­fach und fle­xi­bel an eige­ne Bedürfnisse anpas­sen.

Besondere Merkmale und Funktionen:

  • Browser-über­grei­fend (ein­schließ­lich IE 6),
  • Favicon
  • Abfrage von Displays et cete­ra per media queries
  • fer­tig zum Einsatz von @font-face
  • vali­des HTML5
  • CSS-Reset
  • jQuery (Google CDN)
  • Styhlesheets für IE6 und IE7 (für den Fall der Fälle!)
  • wie­der­ver­wend­ba­re 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 ver­schie­de­ne Display-Breiten aus. Die neu­es­te Version 1.1 hat ein zehn­spal­ti­ges Layoutraster, das für eine Zeilenhöhe von 24 Pixel opti­miert ist. Zudem bie­tet es ein paar typo­gra­fi­sche, dem Goldenen Schnitt fol­gen­de Grundeinstellungen, die in den ver­ti­ka­len Fluss des Layouts pas­sen.

Besonders geeig­net ist Less Framework zum Erstellen von Websites, die für mobi­le Geräte wie Smart Phones opti­miert sind. Unter Chrome, Safari, Firefox, Opera und Internet Explorer (7+) läuft es wun­der­bar. Mehrspaltige Layouts wer­den bei Verwendung eines Blackberry oder iPhone auto­ma­tisch auf ein ein­spal­ti­ges Layout redu­ziert. Einziger Nachteil: Auf dem iPad wur­den Less-Framework-Layouts noch nicht getes­tet.

HTML5/CSS3 Tutorials

So erstellen Sie eine HTML5 iPhone App

Tutorial

Wie man ein Offline-Spiel im Stil von Tetris fürs iPhone kre­iert, ver­mit­telt die­ses Tutorial. Die App läuft im iPhone-Browser Safari ohne mit dem Internet ver­bun­den zu sein – egal, ob über 3G oder WiFi. Das Tutorial ist zwar spe­zi­ell aufs iPhone aus­ge­rich­tet, die Techniken kön­nen jedoch auch auf ande­re Smart Phones über­tra­gen wer­den.

Abwärts kompatibles Single-Seiten-Portfolio mit HTML5 und CSS3 erstellen

Tutorial

Dieses Tutorial zeich­net sich durch aus­führ­li­che und sorg­fäl­ti­ge Erklärung des Lernstoffs aus. Jeder Code-Abschnitt wird sepa­rat erklärt, zudem geht der Autor auf neue HTML5-Elemente gründ­lich ein. An CSS3-Eigenschaften kom­men Farbverläufe, Box-Schatten, abge­run­de­te Ecken und Farbwahl zum Einsatz.

Auf in die Zukunft: Elegante Website mit HTML5 and CSS3 erstellen

Tutorial

Ein wenig lang, aber gründ­lich: Dieses Tutorial geht neben Erklärungen der rei­nen Funktion von HTML5- und CSS3-Eigenschaften auf die Bedeutung die­ser Technik für die Webdesign-Branche ein. So sei es künf­tig nicht mehr unbe­dingt nötig, Mock-ups per Photoshop zu erstel­len.

Realistisch oder nicht? Immerhin ist die Idee, Mock-Ups als HTML-Code statt als PSD-Datei zu erstel­len eine Diskussion wert. Neben die­sen eher phi­lo­so­phi­schen Fragen oder Ansichtssachen ver­mit­telt das Tutorial fast ganz neben, wie Sie eine schö­ne Website  mit HTML5 und CSS3 erstel­len, die in meist­ver­wen­de­ten aku­tel­len Browsern glei­cher­ma­ßen funk­tio­niert.

HTML5 und CSS3: Techniken, die Sie bald verwenden

Tutorial

Dieses Tutorial ver­mit­telt, 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 – die­ses Mal jedoch eher als anwen­dungs­ar­ti­ge Website denn als App. Die Struktur der Website wird mit HTML5 erstellt, wäh­rend die neu­en CSS3-Eigenschaften zum Aufpeppen der Optik ein­ge­setzt wer­den.

Weitere interessante Fundstücke aus dem Netz …

Fazit

Voilà – hier haben Sie also eine soli­de Grundausstattung für den Einstieg und für wei­te­res Experimentieren mit den neu­en HTML5- und CSS3-Techniken. Diese Liste erhebt kei­nen Anspruch auf Vollständigkeit. Kommentare mit wei­te­ren Tipps, Themes oder Tutorials sind wie immer gern gese­hen.

(mm),(tm)

Callum Chapman

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.

7 Kommentare

  1. Ich habe auf mei­ne Blog ein Schritt für Schritt-Tutorial zu respon­si­ve HTML5-Webseiten mit CSS3-Features erstellt. Bei Interesse schaut doch ein­fach mal vor­bei: http://www.lingulo.com/de/tutorials/css/how-to-build-a-html5-website-from-scratch

  2. Jetzt ist wohl die Zeit gekom­men, wo auch ich mal eine Seite in HTML 5 und CSS 3 gestal­ten und mich mit den neu­en Elementen ver­traut machen muss.
    Allerdings befürch­te ich auch, wie Jan erwähnt, dass davon nur Teile nutz­bar sein wer­den. Bestenfalls für lokal genutz­te Seiten in hoch­tech­ni­sier­ten Ländern, wo moder­ne Computer / Smartphones etc. mit “moder­nen” Browsern vor­aus­ge­setzt wer­den kön­nen.

  3. Vielen Dank für die­se schö­ne Zusammenfassung.
    Grüße aus Meißen

  4. Auch 5 bis 10 Jahre sind noch eine opti­mis­ti­sche Schätzung. Ich ärge­re mich von früh bis spät mit den Unzulänglichkeiten der IE-Versionen her­um, und wenn ich mir jetzt noch die “Gags” von Html5 und Css3 dazu­den­ke, dann wird mir ganz “schub­be­rich”.
    Meine Prognose: Html5 (und Css3) wer­den – wie ihre Vorgänger – bes­ten­falls in Teilen nutz­bar sein, wenn man auf den kleins­ten gemein­sa­men Nenner in punc­to Browserunterstützung set­zen muss.

  5. ich stim­me Andreas voll zu. Allerdings muss ich bemer­ken, dass vie­le Schüler jetzt schon ein biss­chen in HTML ein­ge­führt wer­den. Vorallem die, die viel Myspace nut­zen. Meistens desi­gnen die­se ihre Sites via HTML selbst. Sehr sinn­voll!

  6. Zitat: “Es wird nicht mehr all­zu lan­ge dau­ern, dann sind HTML5 und CSS3 der Code, den wir alle ver­wen­den.”

    Bestimmt. Nur wie­viel “nicht mehr all­zu lan­ge” in Jahren ist, ist viel­leicht noch unklar. Aber in 5–10 Jahren sind wir sicher­lich schlau­er.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.