Nataly Birch 7. Januar 2017

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

Nataly kommt aus Sevastopol und liebt Webdesign und Development. Sie betreibt verschiedene...

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

Nataly Birch

Nataly kommt aus Sevastopol und liebt Webdesign und Development. Sie betreibt verschiedene Blogs. In ihrer Freizeit entschlüsselt sie die Geheimnisse dieser Welt oder spielt Volleyball.

Ein Kommentar

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

Tut uns leid, aber die Kommentare sind geschlossen...

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.

Cookies

Weitere Informationen zu den Auswahlmöglichkeiten findest du hier. Dazu musst du zunächst keine Auswahl treffen!

Um Dr. Web zu besuchen, musst du eine Auswahl treffen.

Deine Auswahl wurde gespeichert!

Informationen zu den Auswahlmöglichkeiten

Was du erlaubst!

Um fortfahren zu können, musst du eine Auswahl treffen. Nachfolgend erhältst du eine Erläuterung der verschiedenen Optionen und ihrer Bedeutung.

  • Ich stimme zu:
    Du erlaubst uns das Setzen aller Cookies, die wir in unseren Datenschutzhinweisen genannt haben. Dazu gehören Tracking- und Statistik-Cookies. Aus dem Tracking per Google Analytics bieten wir auf der Seite Datenschutz ein Opt-Out, also die Möglichkeit der Abmeldung, an.
  • Ich stimme nicht zu:
    Wir verzichten bei dieser Option auf den Einsatz von Google Analytics. Die für den Betrieb von Dr. Web notwendigen Cookies werden aber dennoch gesetzt. Einzelheiten entnimmst du bitte den Datenschutzhinweisen

Du kannst deine Cookie-Einstellungen jederzeit hier ändern: Datenschutz. Impressum

Zurück