Andreas Hecht 8. Juni 2015

12 nützliche HTML5, CSS3 und JavaScript Tools für Webdesigner und Entwickler

Webdesigner und Entwickler sind stets auf der Suche nach Tools, die ihnen die Arbeit erleichtern oder angenehmer gestalten. Neue Ressourcen für die Entwicklung von Websites mit HTML5 und CSS3 werden dabei natürlich immer gerne gesehen. Immer mehr Designer und Entwickler setzen bei Ihrer täglichen Arbeit gezielt auf HTML5 und CSS3, was man nicht oft genug empfehlen kann. Heute haben wir eine Liste mit neuen und nützlichen Ressourcen für Sie erstellt, die sich genau diesem Thema widmet.

html5css3-12tools-teaser_DE

Tools für Webdesign und Webentwicklung

HTML5 macht das Webdesign einfacher und funktionsreicher in vielen Belangen. Es kann Ihnen dabei helfen, Apps und Websites mit mehr Funktionalität und Performance auszustatten und faszinierende Desktop-Anwendungen zu kreieren. Die von uns vorgestellten HTML5-, CSS3- und auch JavaScript-Tools sollen Ihnen bei einer schnellen und zügigen Entwicklung hilfreich sein und das (Arbeits-) Leben einfacher machen.

Login Box Concept

Login-Box-Concept

Das Login Box Concept ist eine ansprechende Design-Studie, die online auf eigene Bedürfnisse und Farbgebungen angepasst werden kann. In einem Live-Editor kann man direkt den Code bearbeiten und sofort das Ergebnis des neuen Codes sehen. Alle nötigen Dateien stehen zum Download bereit.

Demo und Download

Circular Fly-Out Navigation Menu

Circular-Fly-Out-Navigation-Menu

Eine recht interessante Menügestaltung liefert dieses mit Sass und CSS3 Transitions, Transformations und Animations erstellte Tool. In der einen oder anderen Anwendung dürfte sich das Menü mit Sicherheit wiederfinden. Minimalistische Websites und mobile Anwendungen könnten ein Anwendungsbereich sein.

Demo und Download

3D Folding Panel

3D-Folding-Panel

Das 3D Folding Panel bietet nicht nur einen ansprechenden Effekt, sondern auch ein nützliches Bedienkonzept. Erstellt wurde es mit CSS3 Transformations und jQuery. Quadrate liegen nebeneinander und können beispielsweise als Artikelvorschau dienen. Klickt man auf eines der Quadrate, faltet sich der mittlere Bereich auseinander und zeigt den Content. Das 3D Folding Panel ist voll responsiv und bietet auch auf einem Smartphone seine Vorteile. Websites mit diesem Konzept sind sehr gut vorstellbar.

3D-Folding-Panel-Aktion

Demo und Download

Motion Blur Effect with SVG

Motion-Blur-Effect-with-SVG

Das Tool stellt eine Bewegungsunschärfe mit Wirkung auf HTML-Elemente vor. Die Effekte werden mit JavaScript und einem SVG Blur Filter erreicht. INsgesamt ist das ein sehr schönes Beispiel für Anwendungsbereiche und Umsetzung.

Demo und Download

Fixed Background Effect

Fixed-Background-Effect

Fixed Background Effect ist ein einfaches Beispiel, wie sich die CSS-Eigenschaft „background-attachment“ sinnvoll und ansprechend nutzen lässt, um einen fixen Hintergrund zu realisieren. Eine nützliche Sache, die wir mit Sicherheit auch öfter in der „freien Wildbahn“ sehen werden.

Demo und Download

Pure CSS Questionnaire Concept

Pure-CSS-Questionnaire-Concept

Um die interessanten Effekte zu sehen, muss man mit dem Mauszeiger die einzelnen Elemente berühren. Es zeigt sich eine sehr flüssig laufende Animation des blauen Balkens, gleichzeitig wechselt der Hintergrund des Notebook-Bildschirms. Findige Entwickler werden hierfür sicherlich sinnvolle Anwendungsbereiche finden. Die gezeigten Effekte sind mit reinem CSS3 realisiert worden.

Demo und Download

Elevator.js

Elevator.js

Elevator.js ist witzig und nervig zugleich. Zuerst einmal muss man bei dieser Demo nach ganz unten scrollen und dort dann auf den „nach Oben“-Button klicken. Der relativ langsam animierte Scroll-Effekt wird von Musik begleitet und endet oben mit einem „Schreibmaschinen-Pling“. Ansprechend und einzigartig ist der Effekt schon und mit anderen Scroll-to-Top Scripts auch nicht zu vergleichen.

Demo und Download

Hero Slider via CodyHouse

Hero Slideshow

Die Hero-Slideshow ermöglicht Ihnen relativ einfach, vollflächige Hintergrund-Slideshows zu erstellen. Die Slideshow kann nicht nur vollflächige Hintergrundbilder darstellen, sondern auch Videos und einzelne Elemente ansprechend integrieren.

Hero-Slideshow-tech

Diese Eigenschaften dürften diese Slideshow zu einem Favoriten für die Entwicklung von Websites mit Hero-Bereichen machen.

Demo und Download

Fullscreen Slideshow by Nikolay Talanov

Fullscreen-slideshow

Die Fullscreen-Slideshow kann „nur“ Bilder vollflächig darstellen und diese automatisch mit ansprechenden Effekten wechseln. Wer eine reine Bild-Slideshow mit Animationen und automatischem Start sucht, sollte sich diese Slideshow einmal näher ansehen.

Demo und Download

FSVS – Full Screen Vertical Slider

Full-Screen-Vertical-Scroller

Der Full Screen Vertical Slider ist ein simpler, vollflächiger und vertikal funktionierender Slider, der ausschließlich mit CSS3 Transitions entwickelt wurde. Ein Fallback für Browser, die CSS3 Transitions nicht unterstützen, wurde ebenfalls bedacht und mit etwas jQuery umgesetzt. Bedienen lässt sich der Slider nicht nur über die Punkt-Navigation auf der rechten Seite, sondern auch mit den Pfeiltasten auf der Tastatur, dem Mausrad, normalem Scrollen mittels Trackpad und Touch-Gesten. Das macht den Slider universell einsetzbar, auch im Bezug auf Mobile-First-Anwendungen.

Demo und Download

Simple Responsive Charts – CHARTIST.JS

Chartist

Chartist.js wurde von einer Gemeinschaft entwickelt, die enttäuscht über andere auf dem Markt befindliche Bibliotheken war. Es existieren unzählige weitere Chart-Bibliotheken, doch keine hatte alle Funktionen, die sich die Gemeinschaft wünschte. Also entwickelten sie Chartist.js, um eine Chart-Anwendung zu haben, bei der man nicht mehr nachbessern muss. Die mit Chartist erstellten, ansprechend animierten Visualisierungen sind voll responsiv und daher auch auf mobilen Geräten gut zu verwenden. Die Chart-Bibliothek bietet dem Entwickler sehr viele Möglichkeiten zur Darstellung von Daten. Des Weiteren kann der Entwickler zwischen etlichen Animations-Möglichkeiten wählen.

Chartist-Beispiel

Demo und Download

Interactive Drag and Drop Coloring Concept

Interactive-Coloring-Concept

Unser letzter Kandidat ist kein wirklich nützliches Tool, dafür aber ein sehr gut umgesetztes Experiment. Jeder Bereich der Website kann per Drag und Drop aus der Farbpalette links eigens eingefärbt werden, was auch sehr gut funktioniert. Ein Anwendungsbereich im realen Arbeitsleben könnte zum Beispiel das Testen von verschiedenen Farb-Kombinationen im Zuge der Entwicklung einer Website sein.

Demo und Download

Fazit

Diese Liste zeigt sehr interessante Ansätze und gibt dem Entwickler einige sofort nutzbare Tools an die Hand, mit denen man unmittelbar gute Ergebnisse erzielen kann. Selbst das von uns verlinkte Experiment kann – kreativ eingesetzt – nützliche Dienste im Arbeitsalltag leisten. Kurzum, mit der überwiegenden Anzahl der vorgestellten Tools lassen sich in Null-Komma-Nichts ansprechende Websites erstellen.

Links zum Beitrag

(dpe)

Andreas Hecht

Andreas Hecht

entwickelt WordPress-Websites und bietet dir einen Website Sicherheit Service und einen Performance Service für deine Website. Außerdem ist er Spezialist für Onpage SEO und bringt Deine Website in die Top-Suchergebnisse von Google. Auf seinem Blog schreibt er über WordPress, SEO und Content SEO.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Ein Kommentar

  1. Danke vielmal für die Vorstellung dieser absolut tollen Tools. Ich kann es kaum erwarten mit dem einen oder anderen etwas zu „basteln“. Geniale Sache!!!

Schreibe einen Kommentar

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

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.