Eine bewegte Seite

Nicht funktionierende Links für Benutzer grafischer browser [Zum Menü springen]

{Willkommen} {Tab styling} {Anwendungen}

Willkommen

Dies ist eine Basis Studie in HTML5 und CSS3. Hierbei wurden section Elemente verwendet, welche von einem article Element umrahmt werden, aber es hätte auch ein generischerer, HTML4 taglicher Container (z.B. ein div) verwendet werden können. So lange der äußere Container (in diesem Fall der article Container) ein Hintergrundbld enthält und fixiert ist, kann man den Hintergrund scrollbar machen, wenn der Browser CSS3 selektoren unterstützt.

Das Bild ist leider alles andere als optimal geeignet, aber es reicht in diesem Fall aus, um zu zeigen wie es funktioniert.

Tab styling

Es wurden lediglich abgerundete Ecken und ein eingezogener (inset) box-shadow verwendet, um den leicht dreidimensionalen Effekt zu erzeugen. Dies ist vielleicht nicht so chic wie ein Bild, aber es ist deutlich schneller.

Anwendungen

Sie können diese Technik z.B. für einen Kiosk oder einen Informationsstand benutzen. Mit dieser Technik kann man natürlich nicht nur horizontal scrollen, eine sehr kreative Person könnte auf diese Art vielleicht einen Web Comic erstellen, in dem der Leser zu jedem Rahmen geführt wird, in dem die Bilder mit SVG dargestellt werden und somit frei skalierbar sind - oder zu als Text mit :content generierten Bildern, mit in canvast Elementen eingebauten interaktiven Hintergrund- oder Vordergrundbildern oder auch per video eingebundenen Hintergrundanimationen, allerdings sollte man sich dann auch ein paar Gedanken über die zur Verfügung stehende Bandbreite machen, denn trotz HTML5 müssen sich dier Daten immer noch durch die Leitung quetschen und jedes grafisch aufwändige Element wirkt sich dabei wie eine Bremse aus.

Mit dieser Technik kann man natürlich auch eine Oberfläche für eine Suchmaschine bauen, wie es z.B. Microsoft derzeit mit der neuen Oberfläche von Bing tut und darauf hinweisen, dass dies angeblich nur dank der Hardware-Beschleunigung des IE9 funktioniert. Dies ist nicht so, wie Sie an der Seite sehen können, die sie gerade betrachten. Diese Seite funktioniert in allen HTML5 und CSS3 fähigen Browsern und ermöglicht auch ohne Hardware-Beschleunigung saubere Übergänge sowie einen funktionierenden Verlauf. Probieren Sie es aus und betätigen Sie die "Zurück" und "Vor" Schaltflächen ihres Browsers: QED