Stop your busy day for a few minutes and explore the code of these handpicked CodePen demos.

You’ll learn how to create a simple but effective neon glow effect, how to make your objects shine with Greensock and how to create an animated steps by step guide.

CSS3 Neon Glow

By NobodyRocks

See the Pen CSS3 Neon Glow by NobodyRocks (@NobodyRocks) on CodePen.4864

This pulsing neon glow effect is created by CSS3 animations of the text-shadow property. Each of the glowing headlines have a multiple text-shadows applied to them.

The values in the from keyframe are double the size of the to keyframe. The animations is repeated infinitely on hover and animation direction is set to alternate.

3D with shine/glare

By GreenSock

See the Pen 3D with shine/glare by Greensock (@Greensock) on CodePen.4864

We all know that Greensock is the right tool for any advanced animations on the web. With a few lines of code you can create this interesting effect.

In this demo the .box is animating from rotationY:-30 to rotationY:30 while the slightly bigger .shine is moving from x:50 to x:-50.

5 lines of JavaScript code is all it takes to create this fancy effect.

Animated Steps

By nickspiel

See the Pen Animated Steps by nickspiel (@nickspiel) on CodePen.4864

Simple use of Waypoints.js and CSS3 animations creates this animated step by step effect. It is created by adding an extra class .seen to the visible li elements.

It is also using the Waypoints build-in offset bottom-in-view to trigger the animation when the bottom of the step is in the browser viewport.

By default all li items are set to opacity: 0; translateX: -100px and the .seen class then animates visible items to opacity: 1; translateX: -100px.

Conclusion

When you explore these CodePen demos closely you’ll realize that it only takes a few lines of code and a creative thinking to come up with a similar effects.

And now back to work, your boss is watching. When he’s not, let me know in the comments below what you think about today’s picks and what is your take away from them.