A look back at2017

A round-up of all Codrops resources of 2017

2017 was an exciting and incredibly accelerated year for web designers and developers with technologies like CSS Grid and Virtual Reality being major game changers. The power of AI is emerging and the unleashing of its full potential in web development is imminent.

Web design has never been so exciting, with vibrant colors and old friends, like gradients, being rediscovered and brought to a new level. Playful shapes, impossible designs and interactions powered by technologies like WebGL were mighty this year.

We're excited to embrace a new year of inspiring changes and see the web landscape evolve into positive complexity despite ever growing attacks on internet freedom. Remember, your choices matter.

Join us for a look back at 2017!

Mirror Effect

A mirror effect as it was seen around in 2017, i.e. on Corentin Fardeau's and Method's website. The idea is to mirror an image and animate it within the context of a slideshow.

View the demo

Little Fragments: Creating a Simple Image Poster Effect

A tutorial on how to create a simple image effect with little image fragments inspired by some poster art and powered by clip-path.

Read the tutorial

Inspiration for Search UI Effects

A couple of schematic, inspirational proof-of-concepts for how to show the search interface on a website using CSS animations.

View the demos

First Person Sunglasses Try-On Experiment

A fun "try-on" experiment that shows a first person view through the colored lenses of sunglasses, mimicking the movement of putting them on and off.

View the demo

Inspiration for Search UI Effects

A couple of schematic, inspirational proof-of-concepts for how to show the search interface on a website using CSS animations.

View the demos

Stack Motion Hover Effects

Some experimental hover effects that reveal a stack of multiple colored cards behind the hovered item.

View the demo

Experimental 3D Room Exhibition Layout

A highly experimental 3D room layout for a gallery that aims to show exhibition details in an interesting way.

View the demo

Expanding Bar Navigation Concept

An experimental tab-like navigation concept where a content area is opened with an animation once an item is clicked.

View the demos

Inspiration for Grid Loading Animations

A set of grid loading animations for your inspiration. The idea is to show grid items with an interesting effect once they are loaded.

View the demo

Developer/Designer Page Layout Concept

An experimental page layout concept with a developer/designer theme and a special image reveal effect.

View the demo

Letter Effects and Interaction Ideas

A couple of ideas for typography animations and letter (hover) effects for playful interactions.

View the demos

WebGL Scroll Spiral

A couple of decorative and inspirational WebGL background scroll effects for websites powered by regl. The idea is to twist some images and hexagonal grid patterns on scroll, creating an interesting effect.

View the demos

Infinite Tubes with Three.js

Some WebGL experiments where the viewer seemingly travels through a textured tunnel. Powered by Three.js and inspired by the effect seen on fornasetti.com.

View the demos

Folder Preview Ideas

Some ideas for previewing or just playing with folders on hover. The idea is to show a little animation when hovering a folder icon and reveal some kind of preview for what's inside.

View the demo

On-Scroll Morphing Background Shapes

A decorative website background effect where SVG shapes are morphing and transforming on scroll.

View the demos

Playful Little Tooltip Ideas

Some little ideas for bouncy and playful tooltip shapes and animations with SVG and anime.js. Among other styles, we use shape morphing and transform.

View the demo

Organic Shape Animations with SVG clipPath

Some shape morphing hover effects on images using SVG clipPath. The idea is to create an organic, fluid feel by animating several elements on hover.

View the demo

CSS Grid Layout Slideshow

A slideshow where each slide has an individual CSS grid layout and a reveal effect when navigating.

View the demo

Animated Image Pieces

A set of experiments with an animated image pieces effect where an image gets shattered into rectangular fragments. Powered by anime.js.

View the demo

Inspiration for Menu Hover Effects

Some menu link hover effects for your inspiration. Powered by CSS and JavaScript for individual letter animations.

View the demo

Morphing Page Transition

A simple morphing page transition effect where an SVG path gets morphed into another while the current page moves up.

View the demo

Organic SVG Shape Morph Ideas

A small set of ideas for organic shape effects. The demos show some ways to use animated SVG morphs interactively on a website, including a menu hover and a content reveal effect.

View the demo

Dynamic Shape Overlays with SVG

Some ideas for multi-layered SVG shape overlays that get generated dynamically with adjustable properties for a variety of effects.

View the demos

Sliced Dual Image Layout

Some layouts with sliced background images, slideshow functionality and glitch effect.

View the demo

Liquid Distortion Effects

A slideshow with liquid distortion effects in WebGL powered by PixiJS and GSAP.

View the demo

Kylo Ren CSS Page Preloader

A Star Wars Kylo Ren page preloader made with HTML and CSS only.

View the demo

Expanding Grid Item Animation

A grid item animation where the thumbnail scales up when the details view is opened. Based on the Dribbble shot "Surf Project" by Filip Slováček.

View the demo

Animated SVG Frame Slideshow

An experimental slideshow that shows an animated SVG frame when transitioning between slides. Different shapes can be used for creating a variety of styles.

View the demos

Decorative WebGL Backgrounds

A collection of decorative shapes displayed as backgrounds using WebGL. The shapes are created with Three.js and animated with the TweenMax library.

View the demos

Creative SVG Strokes Animation

A creative strokes animation of a bike illustration powered by SVG and GSAP.

View the demo

3D Particle Explorations

An inspirational set of demos that explores particle animations in 3D space with three.js. This type of animations could be very suitable for page loaders.

View the demos

CSS Glitch Effect

An experimental glitch effect powered by CSS animations and the clip-path property. Inspired by the technique seen on the speakers page of the 404 conference.

View the demos

CSS Reference

We've published a couple of CSS Reference entries, among them a complete guide to CSS Grid.

Freebies

We also released some freebies this year:

  • Dusk UI Icons (SVG, EPS, PDF, PNG)

  • EGO Illustrations (AI, Sketch, SVG)

  • Hand-drawn Geek’s Treasure Chest (AI, EPS, PDF, SVG, PNG)

  • Drone Icons (AI, Sketch, SVG, PNG, Iconjar)

  • Smoothies Icon Set (AI, SVG, PNG)

Collectives

Counting 378 Collectives, we have strived to collect the most interesting and inspiring web design and development news throughout the year.

Subscribe to our RSS feed to receive them.
You can also get the feed as email.

Send us news items via the Collective submission form.

Our Contributors

We had some fantastic contributions by our authors this year!
A big thank you to all of you!

  • Louis Hoebregts

  • Hui Jing Chen
    (CSS Reference)

  • Jack Rugile

  • Alaric Baraou

  • Petr Urbánek

  • Yoichi Kobayashi

  • Yannis Yannakopoulos

  • Xoihazard

  • Icons8

  • Webalys

  • Tatiana Lapina

  • Round Icons

  • Manuela Langella

  • You!

And that was 2017 :)

Check out the previous editions of our yearly roundups:

2014 2015 2016

We wish you all a healthy and exciting new year!

“You can't use up creativity. The more you use, the more you have.”
— Maya Angelou

Thank you all for supporting us!
From the heart,

Codrops 2017

Follow us: Twitter Facebook Instagram