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

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

Erstellt von: John Blazek

Titel: Chill the Lion

Erstellt von: Karim Maaloul

Titel: Infinite Star Field

Erstellt von: Eduardo Lopes

Titel: Simple Particle Engine

Erstellt von: Jason Mayes

Titel: Morph Character

Erstellt von: Sascha Sigl

Titel: Audio Cloud

Erstellt von: André Mattos

Titel: Particles-Butterfly

Erstellt von: Timur Bilalov

Titel: Canvas Bokeh Generation

Erstellt von: Jack Rugile

Titel: The Wave

Erstellt von: Chris Coyier

Titel: Star Wars – Polygons of the Galaxy II 

Erstellt von: Lloyd James

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

Titel: A Menu Overlay Simulating a Camera Focus Change

Erstellt von: Chris Arasin

Titel: Schedule Template

Erstellt von: Oltika

Titel: Responsive Signup/Login form

Erstellt von: Mohamed Hasan

Titel: Hero Zoom on Scroll

Erstellt von: Vail

Titel: GSAP Cubic bezier page transition

Erstellt von: Maciej Siwanowicz

Titel: Image Effects with CSS

Erstellt von: Bennett Feely

Titel: CSS Text 3D Effect

Erstellt von: Luke Meyrick

Titel: Fully responsive navigation with CSS3 animations and jQuery

Erstellt von: Jan Czizikow

Titel: Material Navigation Pure CSS

Erstellt von: Manasseh Pierce

Titel: Triangled

Erstellt von: Dronca Raul