Kategorien
Design HTML/CSS Inspiration Tutorials

HTML 5 & CSS 3: Tutorials, Tipps und Referenzen

Die Entwicklung W3C-konformer, sprich Browser-übergreifender Standards geht voran. Nachdem nun auch Microsoft auf die Schiene einschwenkt und mit dem just vorgestellten Preview des Internetexplorer 9 sowohl HTML-5-Elemente wie canvas als auch CSS-3-Eigenschaften wie border-radius fehlerfrei unterstützt, ist es Zeit, die neuen Techniken einzusetzen.

Die Entwicklung W3C-konformer, sprich Browser-übergreifender Standards geht voran. Nachdem nun auch Microsoft auf die Schiene einschwenkt und mit dem just vorgestellten Preview des Internetexplorer 9  sowohl HTML-5-Elemente wie canvas als auch CSS-3-Eigenschaften wie border-radius fehlerfrei unterstützt, ist es Zeit, die neuen Techniken zu lernen. Schließlich lassen sich HTML 5 und CSS 3 nicht nur für klassische Websites, sondern auch für Benutzeroberflächen und Applikationen auf mobilen Geräten, die ohne Internetexplorer auskommen, hervorragend einsetzen.

Es geschehen noch Zeichen und Wunder: Animated Border-Radius im Preview des IE 9

Tutorials, Tipps & Referenzen

HTML 5 rocks – Google zeigt wie’s geht

Webentwicklung der nächsten Stufe

Googles Antwort auf Apple’s HTML 5 Showcase: Gut strukturiert und interaktiv gestaltet ist diese umfassende Präsentation der neuen Feature von HTML 5, CSS 3 und JS APIs wie Geolocation, Notifications oder SQL-Database. Die Funktionen der JS APIs und CSS-3-Eigenschaften wie Text- oder Box-Shadow, HTML-Elemente zur Gestaltung von Formularfeldern, dem dynamischen Rendern und Skalieren von Bitmap- beziehungsweise Vektorgrafiken sowie die neuen Möglichkeiten zum Einbinden von Video, Audio und vieles andere mehr lassen sich direkt online ausprobieren.

Außerdem interessant: Die neuen semantischen HTML-Tags und Link-Attribute.


Interaktive Präsentation der neuen Feature von CSS3, HTML5 und JS APIs

Optimiert sind die 48 „Folien“ dieser Präsentation von Marcel Wichary und Ernesto Delgado für Google Chrome. Nach Installation des kostenlosen Chrome Frame PlugIn lassen sich viele der Effekte auch im IE betrachten – so zum Beispiel die vielfachen Möglichkeiten, die das canvas-Element bietet. Per JavaScript und canvas, deutsch für Leinwand, lassen sich auf einem Hintergrund Grafiken beliebig anordnen und verändern. Diese Technik ist inzwischen in fast allen gängigen Browsern implementiert. Große Überraschung: Die brandneue Preview des IE 9 verfügt ebenfalls über dieses Element und schnitt bei Tests sogar besser ab als die so genannten Webkit-Browser.

Lesetipp: Eine kleine Canvas-Einführung von Peter Kröner


Solche Effekte lassen sich mit canvas realisieren.

Tipp: Die JavaScript-Abfrage, mit der Nutzer des IE (6 bis 8) beim Laden der HTML-5-Präsentation ermittelt und auf das kostenfreie Herunterladen und Installieren des Chrome Frame Plugin hingewiesen werden, ist eine nachahmenswerte Idee, um die neuen „Segnungen“ von CSS 3 und HTML 5 auch unter Nutzern der älteren IE-Versionen zu verbreiten. Sofern die so ermittelnden Anwender das Plugin installieren dürfen, können Sie beim Surfen fortan ebenfalls gerundete Ecken sehen oder Lupeneffekte einsetzen, mit denen sich einzelne Bereiche einer Vektorgrafik vergrößern lassen, wie die folgende Abbildung zeigt.

Selektierte Bildbereiche per HTML vergrößern oder verkleinern. Demo*

*) Funktioniert in Google Chrome, IE mit Google Frame PlugIn, Firefox und Opera – nicht in Safari.

Drop-down-Menü mit HTML 5 & CSS 3

Ein ausführliches Tutorial für das unten abgebildete Drop-down-Menü lässt sich laut seinem Verfasser, Dan Wellman, in 25 Minuten nachbauen. Zum Einsatz kommen das HTML-5-<nav>-Tag und CSS-3-Eigenschaften wie border-radius und opacity. Die Hover-Effekte für die zweite Menü-Ebene sind mit jQuery umgesetzt.
Das Ergebnis läuft in allen Webkit-Browsern ohne Probleme. Die Demo funktionierte beim Dr.-Web-Test auch im Internetexplorer (IE), allerdings mit kleinen Einschränkungen – abgerundete Ecken sind wegen der mangelnden CSS3-Unterstützung im IE nicht zu sehen.


Ausklappmenü mit transparenten Auswahllisten und Hover-Effekten ….

DemoTutorial


… das dank Fixes auch im IE 7 und 8 weitgehend funktioniert.

Modale Fenster, Infoboxen & Sprechblasen

Drop-in Modals

Anleitungen für zwei schicke Modalfenster, die mittels CSS-3-Effekten und -Eigenschaften aufpoppen beziehungsweise vom oberen Monitorrand ins Bild klappen, finden sich im ZURB-Playground.


Beschreibung und Demo

Infobox mit CC3-3D-Ribbon

Ausschließlich mit CSS 3 ist diese Infobox mit 3D-artiger Bauchbinde für die Überschrift gestaltet. Zum Einbinden der Dreiecke links und rechts, lohnt es sich, die Kommentare zu lesen. Dort wird die Platzierung der Dreiecke per :before und :after anstelle von Z-Index empfohlen, was den Code schlanker macht.

DemoTutorial

Info-Bubbles – Sprechblasen mit CSS 2.1 und CSS 3

Schön gelöst durch Progressive Enhancement (siehe auch hier) sind diese komplett in CSS realisierten Sprechblasen von Nicolas Gallagher. Die grundlegende Gestaltung der Blockquotes erfolgt in CSS 2.1 – vor allem durch den Einsatz der Pseudo-Eigenschaften :before und :after, während CSS 3 mit Eigenschaften wie gradient, border-radius und transform für ein etwas kompakteres und ausgefalleneres Erscheinungsbild der Sprechblasen sorgt.

Vorteil dieser Methode: Dank des mehrschichtigen Aufbaus, stellen die Browser das dar, was sie anzeigen können. Die Zitate selbst sind in allen – auch den ältesten Browsern zu sehen. Dank weitgehender Browser-Unterstützung von CSS 2.1 werden die einfachen Sprechblasen in den meisten gängigen Browsern dargestellt. Die einzige Ausnahme bildet Firefox 3.0 (zwei bis drei Prozent Marktanteil), der CSS 2.1 nicht unterstützt. Am Ende dieses Postings finden Sie eine detaillierte Checkliste für Browser-Unterstützung von CCS-3-Selektoren, -Eigenschaften und HTML-5-Elementen.

Animierte Bildergalerien und Image Slider

CSS Polaroid Photo Gallery

Schön gemachte Fotogalerie mit den CSS-3-Eigenschaften box-shadow und transform. Gut geeignet für die Präsentation ausgewählter Fotos oder Arbeitsproben.


Tutorial / Demo

CSS 3 Image Slider

Diese Variante ist auch für umfangreichere Sammlungen und vor allem zum Jonglieren mit der CSS-3-Eigenschaft transition interessant.

Tutorial / Demo

Apple Web Gallery mit CSS 3 2D und 3D transforms

Wie man die Eigenschaft transform noch mit 2D- und 3D-Effekten aufpeppen kann, zeigt diese Demo von aus dem Apple Safari Dev Center. Unerfreuliche Einschränkung: Die Demo erfordert einen Safari-Browser.


Demo

Dokumentationen & Browser-Checklisten

Spezifikationen des W3C, Referenzen

HTML-5-Spezifikation (Entwurf, W3C)

CSS-3-Spezifikation (Entwurf, W3C)

HTML 5 – Was geht heute, was geht nicht? Überblick von Peter Kröner

CSS 3 Opacity: Eine ausführliche Referenz (englisch)

Safari CSS Reference

Web Designer’s Checklist

Einen schnellen Überblick, welche Browser, welche Eigenschaften und Attribute unterstützen bietet die Checkliste von findmebyIP.


Browser-Unterstützung von CSS 3 und HTML 5 als Checkliste bei findemebyIP

Schlussbemerkung

Diese Beispiele zeigen insgesamt, dass es sich schon jetzt lohnt, die neuen Möglichkeiten von HTML 5 und CSS 3 für aktuelle Webprojekte einzusetzen. Vor allem deshalb, weil nun auch Microsoft mit dem Internetexplorer 9, der im August 2010 auf den Markt kommen soll, endlich die neuen Techniken implementiert. Damit auch die vielen Nutzer der älteren IE-Versionen in den Genuss von HTML-5- und CSS-3-Effekten kommen, empfiehlt es sich, diese Nutzer mit modalen Fenstern auf den kostenlosen Download und die Installation des Google Frame Plugin hinzuweisen. Vielleicht spornen solche Methoden die Browser-Hersteller auch dazu an, W3C-konform zu arbeiten, damit Kunden nicht zu anderen Anbietern abwandern, die diese Techniken schon nutzen. Äußerst schade ist in diesem Zusammenhang, dass nun andere große Hersteller wieder eigene Süppchen kochen – wie das Beispiel der Apple Web Gallery zeigt.

Auch wenn es noch ein langer Weg ist, bis HTML 5 und CSS 3 vom W3C engültig verabschiedet und flächendeckend unterstützt werden, empfiehlt es sich, die neuen Techniken einzusetezn. Vor allem dann, wenn durch Progressive Enhancement gewährleistet ist, dass auch Nutzer von älteren Browsern eine möglichst gute User Experience haben.

Von Manuela Müller

Manuela Müller studierte Anglistik und Journalistik mit Schwerpunkt Multimedia und europäischer Berichterstattung an der Universität Dortmund. Nach einem Volontariat bei euronews in Lyon/Frankreich sowie diversen Stationen bei Tageszeitungen, Fachverlagen und Online-Magazinen war sie mehrere Jahre als Freelancer tätig.

19 Antworten auf „HTML 5 & CSS 3: Tutorials, Tipps und Referenzen“

Ich möchte gerne diese Webseite umschreiben auf HTM5 und CS3,leider finde ich kaum ein passendes Template,nur meistens in Englisch was ich nicht kann.
könnte mir jemand helfen mit ein paar links?

Nette Einführung, danke!
Wären in anderen Bereichen der IT – zB. bei Netzwerkprotokollen wie TCP/IP – Standards so umgesetzt wie HTML/CSS und Browserunterstützung, gäbe es das World Wide Web in dieser Form wahrscheinlich noch gar nicht (persönliche Mutmaßung).

Das MS mit dem IE9 nun auch (Teile von) HTML5 und CSS3 unterstützt, hat keinen technischen, sondern einen wirtschaftlichen Aspekt. Prioritäten sind das Maß aller Dinge, hier sind es User (Kunden) und die Gefahr des Überlaufs auf – zunehmend stark gewordene – Alternativen.

Aber stark ist, wer mit dem kleinsten Maß der Dinge (HTML/CSS) Erstaunliches vollbringt und (Frau)/Herr über Javascript-Laufzeitfehler ist.

Die leidliche Diskussion, was welcher Browser wo und wie darstellt, wird es auch bei HTML23 und CSS11 noch geben. Wie gesagt, eine Sache der Priorität…!

Box-Shadow soll doch bei Firefox 3.6 funktionieren.
Ich bring ihn einfach nicht dazu das anzuzeigen, beim Safari klappts ohne Probleme.

Ansonsten ganz tolle Seite, einige der Sachen werde ich am Wochenende mal ausprobieren.

Acho das war auf Firefox 3.0 bezogen. Unter Firefox 3 (so wie im Artikel stand) hatte ich Firefox 3.0 – 3.6 verstanden.

Sehr schöne Übersicht!
Immer wieder schön zu sehen, wie viele hübsche, sinnvolle und faszinierende Dinge dank CSS3 (und weiteren Neuerungen wie HTML5 und JQuery überhaupt) möglich sind.
Und wenn nun noch die Redmonder mit ihrem Browser den Sprung schaffen die Standardkonformität zu implementieren, dann wird es wirklich eine feine runde Sache.

Überzeugend finde ich, dass es doch die eine oder andere Fallback-Lösung für aufgezeigte Anwendungen gibt.

Danke für die Zusammenstellung, sehr schönes Showcase!

Schönes Wochenende allen miteinander

Welche unerfreuliche Einschränkung und welches eigene Süppchen? Die Transforms Demo läuft auch im Google Chrome. Und wenn FF keine CSS Animations kann, ist das doch deren Problem, oder? ;-)

Schreibe einen Kommentar

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