CodePen CSS, JavaScript Snippets Worth Checking Out

CodePen CSS, JavaScript Snippets Worth Checking Out

Posted by Rainey

In case you have not seen it, CodePen is a site or sandbox where web designers can play with CSS, JavaScript and HTML. These creations can then be shared with other users who may decide to like your work or follow you. 

CodePen is the brain child of Alex Vazquez, Tim Sabet and Chris Coyier <- who I found this through. Chris Coyier also runs the CSS-Tricks blog, another awesome resource worth checking out.  So without further delay, here are 8 CodePen snippets I recently found that are worth checking out.

Guided tour tooltip CSS and JS
css-js-guided-tour-code

http://codepen.io/yoannhel/pen/pntHc

 

Threedify
threedify

http://codepen.io/neoberg/pen/nvIEs

 

Medium’s Scroll Effect
medium-scroll-effect

http://codepen.io/andreasstorm/pen/pyjEh

 

CSS Backbox
backbox

http://codepen.io/emweisiger/pen/oFrbf

 

Pure CSS Parallax
pure-css-parallax

http://codepen.io/keithclark/pen/JycFw

 

Zoom/Fade Text in Hover Effect
zoom-fade-text-in-hover-effect

http://codepen.io/leandroruel/pen/eCyzj

 

CSS XBOX Loading Animation
css-xbox-loading-animation

http://codepen.io/filipekiss/pen/ECdGq

 

CSS Drawing
css-drawing

http://codepen.io/claudebennedahl/pen/yqhDJ

 

And, if you want to see mine from the CSS Animation post I did a while back you can find it here: http://codepen.io/rainey/pen/ogaek. Please share any cool CodePen snippets that you have found in the comments below.

Like what you are reading? Subscribe to receive monthly tips & updates!

A Monthly Roundup of Articles and a Sweet Deal

Get the latest tips, tricks, tutorials and freebies in your inbox once a monthly.

Join our growing community of front-end web developers and designers. We are constantly publishing new industry tips, tricks and tutorials to help you take your game to the next level. We are also going to include a freebie or deal on something cool each month. Enter your email below and you will only receive this email once a month, nothing else.

Subscribe to our mailing list

* indicates required


    Today in Web Design - Resources, Snippets, Tutorials
    Tagged | , , , ,

    • jefferymoore83

      These are so awesome. Especially the pure CSS parallax one!