Chris Coyier: Some Amazing Work on CodePen III

By  on  

I'm back! David asked me to rope up some of my favorite stuff on CodePen again, which I both love doing, and wince at the thought of having to pick so few favorites. I like a ton of stuff on CodePen. It's kind of a hobby of mine. Here's some things that appeal to my particular tastes ;)

3D Hamburger Transformicon

There are no shortage of hamburgers on CodePen, but this one by Bennett Feely (a transformation of a Dribble Shot by vlbrsk) is exceptionally clever. Bennet is always doing really clever stuff!

See the Pen 3D Hamburger Transformicon by Bennett Feely (@bennettfeely) on CodePen.

It reminds me of that Bees & Bombs style of animation where is a little unexpected and tremendously satisfying. 

Progress Nav 

I'm a sucker for little UI touches and animations that are almost so understated that you can imagine someone barely noticing, but as a front end dev, you definitely blink twice. That's what Hakim El Hattab's navigation line experiment does:

See the Pen Progress Nav by Hakim El Hattab (@hakimel) on CodePen.

Text Effects

It's almost too hard to pick a fav from Mandy Michael's Text Effects. She's definitely pushing the limits of what is possible with styling straight up web text. Here's an incredible one: 

See the Pen Layered fonts in css by Mandy Michael (@mandymichael) on CodePen.

Christmas Presents Typer 

It's completely bizarre to have presents falling from the sky to form the words you type on a keyboard, as happens in this Pen by Steve Gardner. Bizarre in the best possible way.

See the Pen Christmas Presents Typer by Steve Gardner (@steveg3003) on CodePen.

Dino skater

Speaking of bizarre, how about a T-Rex happily skating through town with a blimp for a balloon? Liza Kobrazova is all over it:

See the Pen Three.js Dino skater by Liza Kobrazova (@elliepooh) on CodePen.

Many Me!

Chris Gannon is one of the most prolific animators on CodePen. Here he's gone autobiographical:

See the Pen Many Me! by Chris Gannon (@chrisgannon) on CodePen.

News App Concept with CSS Variables

David Khourshid has been experimenting a lot with the idea of user interactions and CSS variables. As in, what if the event data from a tap or swipe could be passed to CSS in which to control the view? That kind of this is explored here:

See the Pen News App Concept with CSS Variables by David Khourshid (@davidkpiano) on CodePen.

Moving Head

I love this Marjo Sobrecaray interactive animation. It's rather understated. The girl's face has nine possible states it animates to and from, but the details are just right. Down to the helper animation it begins with to teach you how to interact with it.

See the Pen Moving Head (me) by Marjo Sobrecaray (@maaarj) on CodePen.

CSS Grid Layout - New Terminology

Using web design to teach web design is one of my favorite little niches. Stacy Kvernmo does it perfectly here, using cells of a grid layout to teach the words you need to know about grid layout.

See the Pen CSS Grid Layout - New Terminology by Stacy (@stacy) on CodePen.

Minimal Overworld

David DeSandro uses CodePen a bunch to demonstrate things for his Metafizzy projects, like Packery. He also brings amazing little ideas to life, like his Cub n Pup game, and this map generator that reminds me a ton of the top-down look of old NES games like Ultima.

See the Pen Minimal overworld by David DeSandro (@desandro) on CodePen.

Pool Ripple

Speaking of understated animations, Sarah Drasner animated this little cute pool in which the surface of the water gently sways, but even cooler, the floatie hits the wall and generates a ripple across the surface of the water, courtesy of some fancy SVG filters.

 

See the Pen Pool Ripple by Sarah Drasner (@sdras) on CodePen.

 
Chris Coyier

About Chris Coyier

Designer at CodePen. Writer at CSS-Tricks. Podcaster at ShopTalk

Recent Features

  • By
    Facebook Open Graph META Tags

    It's no secret that Facebook has become a major traffic driver for all types of websites.  Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly.  And of course there are Facebook "Like" and "Recommend" widgets on every website.  One...

  • By
    9 More Mind-Blowing WebGL Demos

    With Firefox OS, asm.js, and the push for browser performance improvements, canvas and WebGL technologies are opening a world of possibilities.  I featured 9 Mind-Blowing Canvas Demos and then took it up a level with 9 Mind-Blowing WebGL Demos, but I want to outdo...

Incredible Demos

  • By
    WebKit-Specific Style:  -webkit-appearance

    I was recently scoping out the horrid source code of the Google homepage when I noticed the "Google Search" and "I'm Feeling Lucky" buttons had a style definition I hadn't seen before:  -webkit-appearance.  The value assigned to the style was "push-button."  They are buttons so that...

  • By
    Redacted Font

    Back when I created client websites, one of the many things that frustrated me was the initial design handoff.  It would always go like this: Work hard to incorporate client's ideas, dream up awesome design. Create said design, using Lorem Ipsum text Send initial design concept to the client...

Discussion

    Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!