Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Login
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Menü
  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

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

Sozial sein
Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email
  • Ein Kommentar
Lesedauer: 3 Minuten
  • von Dr. Web Redaktion
  • 7. Januar 2017
Bookmarke mich
Share on pocket

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

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

Dr. Web Redaktion

Dr. Web Redaktion

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

Agenturpartner

netkin digital Marketing

Köln

aeosys

Soest

Haurand Webdesign

Aachen

SEOlist.IO Frankfurt – SEO-Spezialist & SEO-Freelancer

Frankfurt am Main

Homepage & Design Heroes GmbH

Balingen

Alle Agenturpartner

Jobs

Senior Online Marketing Manager und stv. Geschäftsführer

Innsbruck

Junior Media Manager

München

API Developer für die TelemaxX Cloud

Karlsruhe

WordPress Developer – Vollzeit

Remote

Teamleiter Online Marketing

München

Zum richtigen Job

Newsletter

Tipps, Tricks, Ratgeber. Unser Newsletter: Jeden Dienstag frisch gedruckt in Deinem Mail-Postfach.

Lust auf mehr? Wir empfehlen folgende Artikel:

Krumm, schief, blass? So wertest du Fotos von Gebäuden kreativ auf

Etwas Abstand zum Objekt oder ein gutes Weitwinkelobjektiv sorgen dafür, dass große Gebäude im Ganzen abgelichtet werden können. Trotzdem kommt es zu Verzerrungen, wie etwa

 →   

Adobe Photoshop: Dramatische Fotos im Handumdrehen

Wir alle haben hunderte Fotos auf dem Rechner liegen und wissen nichts damit anzufangen. Dabei reichen oft wenige Schritte in Photoshop, um aus einer guten

 →   

So machst du den Tag zur Nacht mit Photoshop

Willst du aus Gründen eine Aufnahme bei Sonnenschein in eine romantische Version bei Nacht verwandeln, so ist das in Photoshop oder kostenlosen Alternativen einfacher als

 →   

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.

Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email

Wissen finden

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

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.