Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Swetlana Senkevitch 4. Juni 2012

Expressive Web: HTML5 und CSS3 kreativ erklärt

Ein Web ohne HTML5 ist schon heute unvorstellbar. Die Anzahl an verschiedenen HTML5,- und CSS3-Techniken ist sehr gross und wächst immer weiter. Beim Einsatz solcher Features ist Inspiration notwendig. Aber auch technische Informationen, Anleitungen und anschauliche Beispiele sind von Vorteil. Gibt es denn eine Quelle, welche in sich Inspiration und fachliche Informationen vereinigt? Die Antwort auf diese Frage gibt der folgende Beitrag, in welchem wir eine Webseite vorstellen, die sich auf die übersichtliche und detaillierte Erläuterung von CSS3- und HTML5-Techniken und Features spezialisiert hat. Sie hört auf den aussagekräftigen Namen Expressive Web.

.

Was ist „Expressive Web“?

Expressive Web wurde von Adobe entwickelt und stellt eine Sammlung von originellen und kreativen Features und Techniken moderner Webtechnologien dar. Das Adobe Team beschreibt als Ziel, zum einen die neusten HTML5,- und CSS3- Features vorzustellen und zum anderen ein tieferes Verständnis anhand von Beispielen, Tutorien und weiteren nützlichen Informationen zu vermitteln. Insgesamt werden 12 neue CSS3- und HTML5-Features vorgestellt. Hier ist ein Überblick:

CSS3 Features

  • CSS3 Animationen
  • CSS3 Gradiente
  • CSS3 Media Queries
  • CSS3 Schatten (CSS3 Shadows)
  • CSS3 Transformationen
  • CSS3 Transitions
  • CSS3 Fonts

HTML5 Features

  • HTML5 Audio
  • HTML5 Canvas
  • HTML5 Forms
  • HTML5 Video
  • HTML5 Web Storage

Jede neue Eigenschaft wird ausführlich beschrieben und erklärt. Das erfolgt anhand von Demos, in denen man die Anwendung der zu betrachtenden Eigenschaften anschaulich sehen kann, Daten bzgl. der Browserunterstützung, Links zu weiterführenden Tutorials, Fallback-Strategien und  Links zu Webseiten, die das jeweilige Feature verwenden.


Ein Ausschnitt aus dem Beitrag zu CSS3 Schatten (CSS3 Shadows)

Einige Beispiele aus Expressive Web: CSS3-Features

Ich habe im Folgenden einige Beispiele ausgesucht, welche mir persönlich sehr gut gefallen haben. Ein von mir gewähltes Beispiel ist die Darstellung des Sonnensystems mit Hilfe von CSS3-Animationen. Dabei kreisen Planeten des Solarsystems mittels CSS3 Animationen um die Sonne.


Anwendung von CSS3-Animationen: Solar System

Das folgende Beispiel entstammt der Kategorie „CSS3 Text Shadows“ und bringt alle Informationen bezüglich der Browserunterstützung, nützlichen Tutorials und Referenzen mit.


Anwendung von CSS3 Textschatten

CSS3 Transitions sind meiner Meinung nach sehr schön am Beispiel von Nike angewendet.


Anwendung von CSS3 Transitionen

Da man im Webdesign ohne Typographie (und Essen) nicht auskommt, habe ich noch ein leckeres Makaroni-Beispiel zum Thema CSS3-Fonts ausgewählt.


Anwendung von CSS3-Fonts

Einige Beispiele aus Expressive Web: HTML5-Features

Die weiteren Beispiele sind mittels der Anwendung von HTML5 kreiert. Auch bei ihrer Auswahl habe ich mich allein von meinem Geschmack leiten lassen.  Fangen wir an mit einem Beispiel aus der Rubrik HTML5 Audio und zwar mit einem süssen Piratenspiel.


Anwendung von HTML5 Audio: Pirates Love Daisies

Ein bisschen Kunst muss sein: Ein schönes Beispiel zur Verwendung von HTML5 Canvas.


Anwendung von HTML5 Canvas: Silk

Und hier noch was zur Verwendung von HTML5 Formen:


Anwendung von HTML5 Forms: The Wheels Of Steel nutzt HTML5 Form-Elemente, um eine interaktive Turntable zu erstellen.

Zum Schluss

Expressive Web enthält zudem noch Links zu weiteren Quellen, die sich mit dem Thema CSS3 und HTML5 beschäftigen.


Weitere Quellen zum Thema CSS3 und HTML5 auf Expressive Web

Das Projekt steht unter einer Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported Lizenz.

(dpe)

Swetlana Senkevitch

Neben dem Chemiestudium interessiert sich Swetlana Senkevitch für sehr viele Dinge dieser Welt. Kunst, Malerei, Psychologie, Naturwissenschaften, Schachspiel, Sprachen und Photographie sind nur einige Beispiele ihrer Interessen und Hobbies. Sie hat eine Leidenschaft fürs Schreiben und Design gefunden und beschäftigt sich nun mit Webdesign.

2 Kommentare

  1. Ein Flash generiertes Planetensystem sieht (leider) besser aus. Farbige Punkte sind eben nur abstrakt Planeten

  2. Cool gemacht, hilft einem nur nicht wirklich weiter.
    Das Netz ist voll von Seiten auf denen Webdesigner coole Effekte mit modernen Technologien zeigen. Die Contentwebseiten basieren dagegen fast alle auf dem gleichen Layout-Schema (Sehr viele Standard WP-Blog-Templates).

Schreibe einen Kommentar

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