Top 10 CodePens of the Week

Chris Sevilleja

Today we're going to start off a weekly series. We'll be showcasing 10 of the best demos we've found on Codepen. Whether it be some cool new technology or a smart use of technologies we're already familiar with, these demos will help fuel your imagination. Enjoy, learn, create!

MENU to Close Arrow

See the Pen MENU to Close Arrow by Joseph Fusco (@fusco) on CodePen.

Bloc Hover Animation

See the Pen Bloc hover animation by SΓ©bastien Lombard (@SebL) on CodePen.

CSS Loading Animation

Press RERUN if you don't see the animation.

See the Pen xpHtr by Munky (@munky221) on CodePen.

CSS Animated Business Card

See the Pen Business Card /r/web_design -- Ciclop by Eduard Kosicky (@heyitsedward) on CodePen.

Creative CSS Captions

See the Pen Creative Caption Gallery (Responsive) by Joshua Mitchell (@Joshuasm32) on CodePen.

Hamburger Menu!

See the Pen CSS Menu Burger by Jack Rugile (@jackrugile) on CodePen.

CSS Loading Animation

Press RERUN if you don't see the animation.

See the Pen Circle-gram by Max Yeo (@yeo) on CodePen.

CSS Dot Loading Animation

Press RERUN if you don't see the animation.

See the Pen Loader a Day (day 23) by Reinier Kaper (@TheDutchCoder) on CodePen.

JavaScript Paper Rock Scissors

See the Pen PAPER - STONE - SCISSORS by fscode (@fscode) on CodePen.

All CSS Clock

Press RERUN if you don't see the animation.

See the Pen CSS3 Working Clock by Ilia (@iliadraznin) on CodePen.

Neat :active and :focused Input Effects

See the Pen Some :active & :focus effects by LukyVJ (@LukyVj) on CodePen.

Chris Sevilleja

151 posts

Co-founder of Scotch.io. Slapping the keyboard until something good happens.