Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
Menü
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Anmeldung
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
    • Berlin

    • Bonn

    • Dortmund

    • Dresden

    • Duisburg

    • Düsseldorf

    • Essen

    • Frankfurt am Main

    • Freiburg

    • Hamburg

    • Hannover

    • Köln

    • Leipzig

    • München

    • Nürnberg

    • Stuttgart

    • Wien

    • Zürich

  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web Logo seit 1997.
  • Agentur finden
  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web » Inspiration » Die Codepen-Schatztruhe: 10 Perlen und 10 nützliche Code-Schnipsel

Die Codepen-Schatztruhe: 10 Perlen und 10 nützliche Code-Schnipsel

Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • Ein Kommentar
Lesedauer: 3 Minuten
  • von Dr. Web Redaktion
  • 7. Januar 2017

Inhaltsverzeichnis

Wie Dribbble oder Behance schafft es auch Codepen, kreative Denker unterschiedlicher Kenntnisstufen anzuziehen und zusammenzubringen. Hier gibt es Denkfutter für jedermann, egal ob ganz am Anfang oder schon hoch in der Nahrungskette stehend.

Besonders, wenn es dir akut an Inspiration mangelt, findest du auf Codepen mit Leichtigkeit das ein oder andere Projekt, dass dich regelrecht wegbläst. Das Beste an Codepen ist natürlich, dass es sich nicht um eine Ausstellung handelt, die starre Stücke zum Bestaunen vorstellt. Vielmehr kannst du auf Codepen an allen Stellen selbst Hand anlegen und das Ausstellungsstück auf verschiedenste Weisen fortentwickeln. So lernst du am direkten Beispiel, was bekanntlich die beste Art des Lernens ist.

Heute habe ich eine Liste mit Pens für dich, die zur Hälfte aus innovativen Perlen und zur anderen Hälfte aus nutzwertigen Codeschnipseln für deine tägliche Arbeit besteht. Während die Perlen an die Grenzen des Machbaren gehen und auch nicht zwangsläufig in jedem Browser funktionieren, bleiben die Codeschnipsel fest auf dem Boden der Tatsachen und bringen unmittelbaren Nutzwert.

10 Perlen für deine Inspiration

Titel: 3D Carousel Using TweenMax.js & jQuery

3d-carousel
Erstellt von: John Blazek

Titel: Chill the Lion

chill-the-lion
Erstellt von: Karim Maaloul

Titel: Infinite Star Field

infinite-star-field
Erstellt von: Eduardo Lopes

Titel: Simple Particle Engine

simple-particle-engine
Erstellt von: Jason Mayes

Titel: Morph Character

morphing-characters
Erstellt von: Sascha Sigl

Titel: Audio Cloud

audio-cloud
Erstellt von: André Mattos

Titel: Particles-Butterfly

butterfly-particles
Erstellt von: Timur Bilalov

Titel: Canvas Bokeh Generation

bokeh-generator
Erstellt von: Jack Rugile

Titel: The Wave

the-wave
Erstellt von: Chris Coyier

Titel: Star Wars – Polygons of the Galaxy II 

polygons-of-galaxy
Erstellt von: Lloyd James

10 handfeste Lösungen für die tägliche Arbeit

Titel: A Menu Overlay Simulating a Camera Focus Change

menu-overlay
Erstellt von: Chris Arasin

Titel: Schedule Template

schedule-template
Erstellt von: Oltika

Titel: Responsive Signup/Login form

login-form
Erstellt von: Mohamed Hasan

Titel: Hero Zoom on Scroll

zoom-hero-image
Erstellt von: Vail

Titel: GSAP Cubic bezier page transition

cubic-bezier-transition
Erstellt von: Maciej Siwanowicz

Titel: Image Effects with CSS

image-effects
Erstellt von: Bennett Feely

Titel: CSS Text 3D Effect

css3-text-effect
Erstellt von: Luke Meyrick

Titel: Fully responsive navigation with CSS3 animations and jQuery

fully-responsive-navigation
Erstellt von: Jan Czizikow

Titel: Material Navigation Pure CSS

material-navigation
Erstellt von: Manasseh Pierce

Titel: Triangled

triangled
Erstellt von: Dronca Raul

Dr. Web Redaktion

Dr. Web Redaktion

An einem „Dr. Web Redaktion“ Artikel arbeiten i.d.R. mehrere Autoren, unter anderem Michael Dobler, und Markus Seyfferth.

Werde ein Sponsor. Kontaktiere uns →

Kostenloses SEO-Tool

Agenturpartner

360 grad konzept logo werbeagentur hannover.

Werbeagentur Hannover | 360 Grad Konzept

Hannover

orange services webdesign agentur esslingen logo

Orange Services

München

Logo für Opus Marketing aus Bayreuth. Links zu sehen ist eine schwarze Schachfigur, der schwarzer Turm. Daneben in Großbuchstaben die Buchstaben OPUS.

OPUS Marketing

Bayreuth

Trendmarke Logo.

Trendmarke GmbH

Stuttgart

Logo der Adfera Webdesign Agentur Erfurt.

ADFERA – Webdesign & Online Marketing

Erfurt

Alle Agenturpartner

Lust auf mehr?

Symbolbild in einem Laptop eingebettet. Zu sehen ist ein Mitarbeiter einer Digitalagentur.
Digitalisierung

Die passende Digitalagentur finden: Das solltest Du beachten

Wir unterstützen Dich bei der Auswahl der passenden Digitalagentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→
SEO Agentur

SEO Agentur

Hier finden Sie eine geeignete SEO Agentur. Sie möchten eine bessere Sichtbarkeit Ihrer Website in Google & Co., mehr Traffic, höhere Conversions, mehr Umsatz? Eine professionelle SEO Agentur unterstützt Sie maßgeblich bei der Erreichung dieser wichtigen Ziele.

→
Mitarbeiter einer WordPress-Agentur mit einer Tasse Kaffee im Vordergrund.
WordPress

WordPress — eine gute Wahl für Ihre Unternehmenswebsite?

Hier finden Sie ein ausführliches FAQ zu WordPress als Entscheidungshilfe und eine Auswahl von professionellen WordPress Agenturen.

→

Eine Antwort zu „Die Codepen-Schatztruhe: 10 Perlen und 10 nützliche Code-Schnipsel“
— was ist Deine Meinung?

  1. Franz Meyer sagt:
    10. Januar 2017 um 10:33 Uhr

    Da sind ja ein paar ganz nette Dinge dabei. Vielen Dank.

    Antworten

Schreibe einen Kommentar Antworten abbrechen

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

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • Die besten WordPress Agenturen
  • So finden Sie die richtige SEO-Agentur
  • Ist WordPress eine gute Wahl für Ihre Website?
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • Die besten WordPress Agenturen
  • So finden Sie die richtige SEO-Agentur
  • Ist WordPress eine gute Wahl für Ihre Website?

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑