HTML5 und CSS3 haben das Web in eine schönere Arbeitsumgebung verwandelt aber sie haben auch eine Menge neue Markup-Elemente und Styles zu meistern bereitgestellt – und da ist der ständig wechselnde Support noch gar nicht erwähnt. Noch schlimmer ist, dass Browser nun mal nicht alles aushalten, also muss man seinen Code sauber halten und die Scripte in einen Wrapper packen, wenn man auf mehreren Geräten arbeiten möchte.

Dafür gibt es so viele tolle neue Möglichkeiten stilvolle, funktionale und schöne Dinge völlig ohne Java Script zu erstellen. Ich habe ein paar Tutorials zusammen getragen in denen die besten Lösugen für alltägliche und extravagante Aufgaben gezeigt werden. Dank HTML5 und CSS3 braucht man nun nicht mehr diese lästigen Script-Tags und die Seiten laden wunderbar schnell.

Verbessern der Thumbnail-Galerie mit CSS3 Übergängen und Transfomationen (Responsive)

8

Dieses Tutorial von Tangled In Design zeigt wie man eine responsive Bilder Galerie mit reinen CSS Übergängen zum Leben erwecken kann. Kein Java Script nötig!

Reines CSS: Responsives Layout mit flüssigen Übergängen

SmoothTransitions

Tympanus bietet uns ein weiteres Reines-CSS-Tutorial und führt uns durch den Prozess ein responsives Layout mit nichts weiter als einem Style sheet zu erstellen.

Der Mozilla HTML5 Canvas-Führer

Screenshot 2014-10-01 at 10.19.42

Das MDN oder Mozilla Developer Network führt uns in die mächtige Welt von HTML5 Canvas ein. Canvas erlaubt es Bilder, Graphen und eine Reihe von Animationen zu erstellen.

Ein Gedanke über HTML5 Geolocation

html5-geolocation

Dieses Tutorial von InstantShift handelt von allen wichtigen Details zu Geolocation und natürlich auch die Schlüsselfunktionen von geo-data. Damit wird  targeted marketing bedeutend effektiver.

Seitenübergänge mit CSS3

CSS3PageTransitions

Überall im Netz findet man JavaScript-Übergänge aber Sergio Camalich hat sich die Mühe gemacht ein paar reine CSS-Übergänge zu schreiben. Endlich Transitions die den Browser nicht in die Kniee zwingen.

Wie man HTML5 Drag-and-Drop richtig benutzt

featured29@wdd2x

Eines der größten neuen Features in der HTML5 Bibliothek ist Drag and Drop – nun endlich eine eingebaute Methode für den Browser. Nur noch wenige Zeilen JS sind nötig. Web Designer Depot erklärt den Prozess.

Kreis-Hover Effekte mit CSS3

CircleHoverEffects

Eine weitere JS-Alternative mit vielen coolen Transitions wird in diesem Tutorial von Tympanus erklärt.

HTML5 Audio Player mit Playlist

player-700x373

Every now and then you come across a project that needs some kind of media player and HTML5 makes this a whole lot easier – as shown by this tut from Script Tutorials.

Immer mal stößt man auf ein Projekt in dem Audio-Dateien eine Rolle spielen – Dank HTML5 und den Schreibern von Script Tutorials ist das jetzt viel einfacher.

Die Illusion von gestapelten Bildern mit CSS3 Pseudo-Elementen erzeugen.

stacks-css3-pseudo-elements

Wem falches Design nicht zusagt, dem ist mit der zusätzlichen Tiefe und Textur dieses Tutorials geholfen. Mit den neuen Pseudo-Elementen kann man nun sehr einfache Illusionen kreieren.

Wie man eine Stoppuhr mit nichts weiter ausser CSS baut.

Screenshot 2014-10-01 at 10.18.17

Learn how to make a stopwatch using CSS3 keyframe animations with this interactive tutorial from The Code Player.

Lernt in diesem interaktiven Tutorial von The Code Player, wie man eine Stoppuhr mit CSS3 Keyframe Animationen erstellt.

Höhe gleich Breite ohne JavaScript

Screenshot 2014-10-01 at 10.18.03

CSS lacks a simple way to put equal height and widths on divs, but luckily some clever people have come up with CSS-only solutions and this article from Made My Day visualises a fix for height equals width using pure CSS from A List Apart and Stack Overflow.

CSS fehlt eine einfache Möglichkeit Divs gleich hoch und breit zu machen. Aber glücklicherweise haben ein paar schlaue Menschen eine Lösung gefunden. Dieser Artikel von Made My Day visualisiert eine fixierte Höhe mit gleicher Breite – von A List Apart und Stack Overflow.

Aufgehende Suchleiste – reines CSS

ExpandingSearchBar

A responsive search bar goes a long way on multiple devices when your site has a lot of content for users to find. Tympanus makes a final appearance on our list to show you how it’s all done.

Eine responsive Suchleiste ist auf vielen Geräten gern gesehen – gerade wenn es viel Inhalt zu erforschen gilt. Tympanus hat eine letzte Rolle in der Liste und zeigt uns wie es gemacht wird.