Codepen Treasure Chest: 10 Pearls and 10 Helpful Code Snippets

Like Dribbble or Behance, Codepen is a sacred place that attracts and gathers together thousand of creative people of utterly different skill and knowledge levels. Whether you are a highly proficient developer who knows his stuff or just a novice coder who has only embarked on an adventurous journey of converting ideas into digital reality, you will certainly find here something special.

If you are lacking in inspiration, there is a ton of incredible, mind-blowing projects: each one is an interfusion of styles, pioneering techniques, and smart ideas. The great thing is that it is not just a collection of masterpieces that you are only allowed to contemplate excluding unnecessary touching much like in an exhibition in the museum. On the contrary, you are welcome to not only touch, in a figurative manner of speaking but also break any of these pieces of art into fragments and leave no stone unturned in the struggle of getting to grips with the concept. Sharing is caring – is one of Codepen’s doctrine; it is destined to be explored. So why not to make the most out of it?

Today we have compiled a list of pens that is split into two. The first part is dedicated to some innovative and top-notch projects that show that testing the limits can actually bring some spectacular results. It is here where you can get a boost and spur for pushing your boundaries. Maybe some of the examples in this section do not work properly even in all modern browsers, but they certainly have a wow factor. The second part includes code snippets that are down to earth and in some cases are even trivial, but they are practical and sought-after and can be used for solving mundane issues.

For Inspiration

3D Carousel Using TweenMax.js & jQuery

3d-carousel
Creator: John Blazek

Chill the Lion

chill-the-lion
Creator: Karim Maaloul

Infinite Star Field

infinite-star-field
Creator: Eduardo Lopes

Simple Particle Engine

simple-particle-engine
Creator: Jason Mayes

Morph Character

morphing-characters
Creator: Sascha Sigl

Audio Cloud

audio-cloud
Creator: André Mattos

Particles-Butterfly

butterfly-particles
Creator: Timur Bilalov

Canvas Bokeh Generation

bokeh-generator
Creator: Jack Rugile

The Wave

the-wave
Creator: Chris Coyier

Star Wars – Polygons of the Galaxy II 

polygons-of-galaxy
Creator: Lloyd James

Ideas/Solutions For Work

A Menu Overlay Simulating a Camera Focus Change

menu-overlay
Creator: Chris Arasin

Schedule Template

schedule-template
Creator: Oltika

Responsive Signup/Login form

login-form
Creator: Mohamed Hasan

Hero Zoom on Scroll

zoom-hero-image
Creator: Vail

GSAP Cubic bezier page transition

cubic-bezier-transition
Creator: Maciej Siwanowicz

Image Effects with CSS

image-effects
Creator: Bennett Feely

CSS Text 3D Effect

css3-text-effect
Creator: Luke Meyrick

Fully responsive navigation with CSS3 animations and jQuery

fully-responsive-navigation
Creator: Jan Czizikow

Material Navigation Pure CSS

material-navigation
Creator: Manasseh Pierce

Triangled

triangled
Creator: Dronca Raul

Nataly Birch

Nataly is an internet entrepreneur and an amateur web designer and developer from Sevastopol, Ukraine. She is running a blog for web designers and developers where you can find some inspirational and useful stuff. In her spare time she reads books, unveils the secrets of the world and plays volleyball. Visit her blog or follow her on twitter

Leave a Reply

1 Comment on "Codepen Treasure Chest: 10 Pearls and 10 Helpful Code Snippets"

Notify of
avatar
Sort by:   newest | oldest | most voted
Rajkumar
Guest

Hi Nataly,
I must agree, that is unique. I have seen so many different art and styles but i love the butterfly. 3D Carousel is simply amazing and these types of things amuse people and attract more readers to the site.
Great job Nataly, well done.

wpDiscuz