Vorheriger Artikel Nächster Artikel

15 kostenlose jQuery- und CSS3-Tutorials

Eine Reihe von jQuery- und CSS3-Tutorials erleichtert Webdesignern das Entwerfen von Websites. Wir stellen euch einige besonders gelungene vor, mit denen ihr beispielsweise ein chronologisches Portfolio, tolle Effekte, animierte Banner oder ansehnliche Slideshows erstellen könnt.

Einige der jQuery- und CSS3-Tutorials eignen sich nicht ausschließlich für das Umsetzen spezifischer Aufgabenstellungen, sondern sind auch ein probates Mittel, um sich mit Plugins und der entsprechenden Technologie auseinander zu setzen.

Mit und können Webdesigner innovative Designs umsetzen, die es ihren Kunden unter Umständen erleichtern, Besucher mit nicht alltäglichen Design-Elementen auf die eigene Website zu locken. Die folgenden kostenlosen jQuery und CSS3 Tutorials richten sich in erster Linie an noch unerfahrene Webdesigner.

Ressourcen für jQuery und CSS3

Wer noch auf der Suche nach Templates, Plugins oder sonstigen Tipps zu den Themen jQuery und CSS3 ist, wird auch hier auf t3n fündig. Anlaufpunkte sind beispielsweise die folgenden Artikel:

  1. Hilfreiche Cheat-Sheets zu HTML5, CSS3 und jQuery
  2. jQuery: 14 Plugins für flexible Website-Layouts
  3. 5 kostenlose jQuery-Bildergalerien für Responsive Webdesign
  4. CSS3-Animationen: 10 nützliche Links zu der Keyframe-Technik
  5. CSS3: Bildübergänge mit 3D-Rollover-Effekten

jQuery und CSS3 Tutorial: Timeline Portfolio

Das Timeline Portfolio ist nur eines von vielen kostenfrei erhältlichen jQuery und CSS3 Tutorials.

Diese Tutorial widmet sich dem jQuery-Plugin Timeline, mit dem man Inhalte in chronologischer Reihenfolge anzeigen kann. Dabei lassen sich unterschiedliche Medien wie Tweets, Videos und Karten einbinden und mit einem Datum versehen. Das Tutorial zeigt, wie man mit dem Plugin und einigen Änderungen am Design ein chronologisch sortiertes Portfolio erstellen kann.

jQuery und CSS3 Tutorial für Image Slider

Mit jQuery und CSS3 Tutorials lassen sich eine ganze Reihe von Design-Elementen erstellen und pimpen. Hier wird gezeigt, wie man einen praktischen Image Slider erstellt.

In diesem Tutorial wird gezeigt, wie man mit Hilfe des Nivo Slider jQuery Skript und CSS3 einen Slider für Bilder erstellt. Das Skript ist kostenlos verfügbar und beinhaltet 16 Überblendungseffekte.

jQuery und CSS3 Tutorial: Annährungseffekt für Thumbnails

In diesem Tutorial wird das Erstellen eines Annährungseffekts für Thumbnails erklärt. Fährt man mit der Maus über eine Sammlung von Thumgnails, skallieren diese auf Basis der Entfernung zum Mauszeiger. Darüber hinaus wird erklärt, wie man erreicht, dass zum Thumbnail im Vordergrund eine Erklärung eingeblendet wird.

3D-Effekte für Slideshows mit jmpress.js

Impress.js ist eine nützliche JavaScript Library, wenn man außergewöhnliche 3D-Präsentationen erstellen will. Ein jQuery-Port stellt diese Funktionen auch in einem jQuery-Plugin zur Verfügung. Im Tutorial geht es darum, wie Webdesigner dieses Plugin nutzen können, um eine responsive Slideshow mit 3D-Effekten zu erstellen.

jQuery und CSS3 Tutorial für Folder Tabs

In diesem Tutorial lernt man, mit CSS3 Folder Tabs zu erstellen.

Akkordeon-Menüs

Mit Hilfe dieses Tutorials lassen sich Akkordeon-Menüs mit jQuery erstellen, die auch in älteren Browsern funktionieren. Zwar kann man derartige Menüs auch in purem CSS3 umsetzen, aber der :target selector macht in manchen betagten Browsern Probleme.

Login-Formulare mit jQuery und CSS3

In diesem Tutorial lernt man, wie man ein einfaches Login-Formular in CSS3 und jQuery erstellt.

Vollbild-Slideshow für den Hintergrund mit CSS3

Wer schon immer wissen wollte, wie man eine Vollbil-Slideshow für den Hintergrund seiner Website umsetzen kann und dabei nur CSS einsetzt, wird in diesem Tutorial fündig.

Responsive Content-Navigation mit CSS3

Auch eine Content-Navigation lässt sich ausschließlich mit CSS umsetzen, wie dieses Tutorial zeigt. Mit Hilfe von hübschen Übergängen wird die Navigation aufgehübscht. Die Content-Navigation funktioniert allerdings ausschließlich in Browsern, die die entsprechenden CSS-Properties unterstützen.

Blätterbares Magazin mit turn.js

Der Blätter-Effekt war einst eine Flash vorbehaltene Animation. Dieses Tutorial zeigt, wie man mit PHP und turn.js ein blätterbares Magazin erstellt.

Seitenübergänge mit CSS3

Hier lernt der geneigte Webdesigner, wie er mit CSS Transitions und dem :target Property ansehnliche Übergangseffekte realisieren kann.

Animierte Banner mit CSS3

Auch Banner und Werbung kann mit CSS3-Animationen pimpen, wie dieses Tutorial beweist. Man sollte allerdings bedenken, dass derzeit noch lange nicht jeder Browser CSS-Animationen unterstützt. Aus diesem Grund geht das Tutorial auch darauf ein, wie der Webdesigner erreicht, dass die Banner auch in anderen Browsern funktionieren.

CSS-Buttons mit Pseudoelementen

Buttons mit dem gewissen Etwas - darum geht es in diesem Tutorial, das zeigt wie man sein Ziel mit nur einem Anchor-Tag pro Button und CSS erreicht.

Produkt-Showcase mit CSS3

Wer Produkte angemessen im Web präsentieren will, kann dies mit Hilfe dieses Tutorials auf originelle Art und Weise tun.

Filter mit CSS3

In diesem Tutorial bekommt man erklärt, wie man mit Hilfe des General Sibling Combinator und der Pseudoklasse :checked den Status anderer Elemente ändern kann. Die nenannten CSS3-Eigenschaften werden am Beispiel eines experimentellen Portfolio-Filters, der mit Checkboxen und Radio Buttons funktioniert, erklärt.

Weiterführende Links:

 

 

 

 

 

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
Vorheriger Artikel Zurück zur Startseite Nächster Artikel
4 Antworten
  1. von dominik am 15.04.2012 (19:41 Uhr)

    einfach mal die quelle nennen...
    http://designmodo.com/jquery-css3-tutorials/

    Antworten Teilen
  2. von Sébastien Bonset am 16.04.2012 (11:39 Uhr)

    Dominik und Daniel Opalla, die Links zu den Quellen der vorgestellten Tutorials (inklusive der Tutorials von Designmodo) findet ihr im Artikel. Dennoch ist der von euch gepostete Link sehr hilfreich, da sich dort noch zehn zusätzliche Tutorials finden. Vielen Dank dafür!

    Antworten Teilen
  3. von Jörg am 17.04.2012 (09:01 Uhr)

    Vielen Dank für die Liste. Sind echt ein paar gute Sachen bei, die ich wohl im neuen Shop nutzen werde (shopware).

    Nur weiter so. Ich würde mich sehr freuen, wenn bei euch mal öfters solche Listen veröffentlicht würden.

    Viele Grüße

    Jörg

    Antworten Teilen
  4. von steingroever am 19.11.2012 (12:27 Uhr)

    Schöne Sammlung von Links. Wenn man sich an einer solchen Sammlung mal an einem Tag abarbeitet kann man immer viel dazu lernen.

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema jQuery
Dropdown-Menüs: 20 Demos von simpel bis schick – inklusive Download und Tutorials
Dropdown-Menüs: 20 Demos von simpel bis schick – inklusive Download und Tutorials

HTML5 und CSS3 bilden die Standards, die Webseiten- und Mobile-Web-Entwicklung aktuell prägen. Es gibt unzählige Variationen von Dropdown-Menüs und Tutorials auf Basis dieser Technologien – vor … » weiterlesen

Inspiration: CSS-Ladebalken und -Animationen für dein Projekt
Inspiration: CSS-Ladebalken und -Animationen für dein Projekt

Zur Darstellung von Ladezuständen könnten ein einfaches „Lade“ oder eine Gif-Animation mit einem Ladebalken ausreichen. Mit CSS3 stehen aber weitere, optisch ansprechendere und … » weiterlesen

10 hilfreiche Tutorials und Quellen für Webentwickler und -designer (Teil 4)
10 hilfreiche Tutorials und Quellen für Webentwickler und -designer (Teil 4)

HTML5, CSS3, UX-Design, Icon-Packs & Co.: In unserer neuen Serie fassen wir für euch regelmäßig neue Tutorials und Quellen zusammen, die aus unserer Sicht extrem hilfreich für Webentwickler … » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n-Newsletter t3n-Newsletter
Top-Themen der Woche für Web-Pioniere
Jetzt kostenlos
anmelden
Diesen Hinweis verbergen