A look back at2015

A round-up of all Codrops resources of 2015

Just like last year, we've collected all Codrops resources to celebrate yet another year of creative inspiration.

2015 was a year of profound changes and also quite a bit of reconciliation with the past by marrying traditional design methods with modern techniques.

While the previous year was marked by simplified, flat design and the beginnings of exciting animation manifestos, this year was full of ideas on how to move forward to a more sophisticated and mature web.

The coming year will certainly be even more exciting as it will reveal how we'll use all the new techniques and ideas in order to shape the future web.

And now, join us for a look back at 2015!

The Codrops CSS Reference

We are so happy that we shared the CSS Reference with you this year! Sara Soueidan has written over 300 entries on all the important CSS properties, functions, data-types, at-rules and pseudo-classes so that learning CSS becomes easier.

Read more about it in Sara's article.

Inspiration for Button Styles and Effects

A collection of fresh button styles and effects for your inspiration. We use CSS transitions and pseudo-elements for most of the effects.

Prism Effect Slider with Canvas

A tutorial on how to create a slider with a "prism" effect using HTML5 canvas globalCompositeOperation and a layering technique.

Read the tutorial

Some Ideas for Checkout Effects

Some fun effect and layout ideas for the first step of a checkout process in an online store. We are using the morphing buttons concept together with CSS transforms and transitions.

Inspiration for Text Input Effects

Some inspiration for effects on text inputs using CSS transitions, animations and pseudo-elements. We've made two sets this year.

Check out the demo.

Creative Gooey Effects

A set of examples that use a gooey SVG filter for creating a variety of different effects for all kinds of website components.

Read more about the technique used here.

Subtle Click Feedback Effects

A set of subtle effects for click or touch interactions inspired by the visualization of screen taps in mobile app showcases.

View the demo

Image Tilt Effect

Playful Interaction for Draggable Elements

How to Create (Animated) Text Fills

A tutorial on how to create various types of (animated) fills and strokes for text using different techniques including CSS and SVG.

Read the tutorial

Interactive Drag and Drop Coloring Concept

A little fun experiment where you can color a website mockup by dragging and dropping a color droplet from a palette.

Creating a “Jump Loader” Animation with SVG and GSAP

Learn how to create a playful "Jump Loader" animation with SVG and GSAP.

Read the tutorial

Grid Item Animation Layout

A responsive, magazine-like website layout with a grid item animation effect that happens when opening the content.

Blueprint: Product Comparison Layout & Effect

Blueprint: Filterable Product Grid

Playful Trampoline Effect

A little playful content navigation effect that uses the draggable Elastic Stack and Snap.svg for animating a background shape like a trampoline. The demos are a tribute to Leonard Nimoy.

Read the tutorial

Motion Blur Effect with SVG

A tutorial on how to create a motion blur effect on HTML elements using JavaScript and an SVG blur filter. We were taking a look at how to make an approximation of the motion blur effect, for horizontal or vertical transitions.

Read the tutorial

Inspiration for Text Styles and Hover Effects

A couple of creative text styles and hover effects for your inspiration. Some effects use experimental techniques including SVG masking and Canvas.

Photography Website Concept

A photography-inspired website layout with an expanding stack slider and a background image tilt effect.

Card Expansion Effect with SVG clipPath

A morphing card expansion effect enhanced by a low poly background animation, using SVG clipPath and Trianglify.

Color Extraction Effect

A little slideshow with a color palette creation effect using CSS Filters and Vibrant.js.

Styling SVG <use> Content with CSS

An in-depth article on how to style the contents of the SVG element and overcome some challenges it brings.

Read the tutorial

Shaded Progress Bars: A CSS/Sass Exercise

A tutorial on how to create some interesting 3D progress bars with CSS/Sass. Discover how to use box shadows and gradients to create realistic looking skins.

Read the tutorial

Styling & Customizing File Inputs the Smart Way

A tutorial on how to style and customize <input type="file"> in a semantic, accessible way using the <label> element and some JavaScript.

Read the tutorial

Effect Ideas for Card Stacks

Effect Ideas for Image Grids

How to Create a Fullscreen Video Opening Animation

A tutorial on how to create a video opening animation inspired by the effect seen on momentsapp.com.

Read the tutorial

Creating Material Design Ripple Effects with SVG

An in-depth tutorial on how to build the ripple effect outlined under Google Material Design's Radial Action specification and combine it with the powers of SVG and GreenSock.

Read the tutorial

Some Inspiration for Pricing Tables

Elastic Progress

Mobile “Pull to Share” Interaction Experiment

A mobile "pull to share" interaction that allows to share a page by using the familiar "pull to refresh" movement. Based on the action for refreshing and opening/closing a tab in Google Chrome for mobile.

Please use a mobile phone when opening the demo so that you can play with the effect.

Shazam-Like Morphing Button Effect

A tutorial on how to create a Shazam-like button that morphs into a music player using Snap.svg.

Read the tutorial

Animating an SVG Menu Icon with Segment

A tutorial on how to implement an animated menu icon based on the Dribbble shot by Tamas Kojo using SVG and Segment, a JavaScript library for drawing and animating SVG paths.

Read the tutorial

Interactive Room Display

An experimental interactive room slideshow based on the prototype concept by Bilal Mechairia's Dribbble shot "Spaces".

Blueprint: Zoom Slider

Blueprint: Page Stack Navigation

Blueprint: Multi-Level Menu

Rain & Water Effect Experiments

Some experimental rain and water drop effects made with WebGL and shown in different demo scenarios.

Animated Map Path for Interactive Storytelling

An interactive journey where a Canvas map path is animated according to the content that is scrolled on the page.


We've published a couple of creative freebies by very talented designers and developers. The amazing Boxify HTML5 template by Peter Finlan was the most downloaded one in 2015!

  • “Boxify” One Page Website Template

  • Flat Icon Pack

  • Organic Food Icon Set

  • “Forkio” One Page Website Template

  • Travel and Vacation Icon Set

  • Cinema Icon Set

  • “Cardio” One Page Website Template

  • “Sedna” One Page Website Design & Template

  • Web Hosting & Technical Support Icons

  • “Land.io” UI Kit + Landing Page Design

  • “Land.io” UI Kit + Landing Page Template

  • Colored Line Icons

  • Allergy Info Cosmetic & Food Icons


With 200 published Collective issues, we continue collecting the most interesting and inspiring resources, tools and articles for our weekly web design and development news.

If you'd like to submit something, just get in touch.

Our Contributors

A big thank you goes to all our fantastic contributors who created amazing content for Codrops this year!

  • Lucas Bebber

  • Sara Soueidan

  • Peter Finlan

  • Claudio Calautti

  • Taty Grassini

  • Yoksel

  • Rafael González

  • Wojciech Zasina

  • Luis Manuel

  • Dennis Gaebel

  • Chris Gannon

  • Osvaldas Valutis

  • Juan Sarmiento

  • Phi Rhytmus

  • Catalin Zorzini

  • Squid.ink


  • PixelBuddha

  • Eezy Inc.

  • Icons8

  • You!

We'd also like to thank BuySellAds.com.
They make our work possible!

“Live as if you were to die tomorrow. Learn as if you were to live forever.” — Mahatma Gandhi

Have a wonderful 2016 everybody!

Thank you all for supporting us!
From the heart,

Codrops 2015

Follow us: Twitter Facebook Google+