Drücke die Tasten ◄ ► für weitere 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 Tutorials 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 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:

 

 

 

 

 

319 Shares bis jetzt – Dankeschön!

Bewerten
VN:F [1.9.22_1171]
8 Antworten
  1. von News vom 15. April 2012 | Markus Bley am 15.04.2012 (14:43Uhr)

    [...] 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 Tutorials 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 [...] [...]

  2. von dominik am 15.04.2012 (19:41Uhr)

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

  3. von Daniel Opalla via facebook am 15.04.2012 (20:29Uhr)

    Quelle: http://designmodo.com/jquery-css3-tutorials ?

  4. von Sébastien Bonset am 16.04.2012 (11:39Uhr)

    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!

  5. von TQ (zerodev) | Pearltrees am 16.04.2012 (20:42Uhr)

    [...] 15 kostenlose jQuery- und CSS3-Tutorials » t3n News Wer Produkte angemessen im Web präsentieren will, kann dies mit Hilfe dieses Tutorials auf originelle Art und Weise tun . 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. 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 . [...]

  6. von Jörg am 17.04.2012 (09:01Uhr)

    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

  7. von Die besten meiner geteilten Links auf Tw… am 04.05.2012 (10:36Uhr)

    [...] Eine Liste bestehend aus 15 jQuery- und CSS3-Tutorials um moderne Effekte zu zaubern. Entdeckt ebenfalls im t3n Magazin. [...]

  8. von steingroever am 19.11.2012 (12:27Uhr)

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

Deine Meinung

Bitte melde dich an!

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

Jetzt anmelden

Mehr zum Thema jQuery
Die Mutter aller Dropdown-Menüs: Warum Amazons Menü so schnell ist
Die Mutter aller Dropdown-Menüs: Warum Amazons Menü so schnell ist

Rasend schnell, präzise und trotz schierer Informationsmengen übersichtlich: Das ist das Dropdown-Menü der Amazon-Seiten. Heute zeigen wir euch, wie ihr ein ähnliches Navigationsmenü selbst... » weiterlesen

Mehr Performance für deine Website mit CSS3, dank Hardware-Acceleration
Mehr Performance für deine Website mit CSS3, dank Hardware-Acceleration

Wir zeigen euch, wie ihr die Hardware-Acceleration mit CSS3 aktivieren könnt um eure Web-Projekte, zum Beispiel auf Smartphones, schneller laufen zu lassen. » weiterlesen

10 Dropdown Menus mit CSS3 und HTML5 inkl. Tutorials
10 Dropdown Menus mit CSS3 und HTML5 inkl. Tutorials

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

Kennst Du schon unser t3n Magazin?

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