2014: Our Favorite Codrops Resources

Just like any year, 2014 was no exception at being an exciting year for front-end developers and web designers. The year was marked by animated lines, morphing shapes, smart effects and new interaction concepts.

Join us for a look back at 2014 and get excited about the new year which, hopefully, will be another great and inspiring year.

Shape Hover Effect with SVG

In this tutorial we've recreate the hover effect as seen on The Christmas Experiments website from the previous year (2013). We've used SVGs for the shapes and Snap.svg for animating them on hover.

Read the tutorial

Simple Stack Effects

A set of simple stack effects for inspiration.

How to Create a Circular Progress Button

A tutorial on how to implement the circular progress button concept by Colin Garven. We are using the SVG line drawing animation technique as described by Jake Archibald to animate the circular progress and provide a success and error state to indicate the final status.

Read the tutorial

Dot Navigation Styles

Some subtle effects and styles for simple dot navigation

Inspiration for Article Intro Effects

Some inspiration for effects applied to title headers of articles with a fullscreen image. The idea is to show some creative transition when continuing to the article body.

Draggable Dual-View Slideshow

Scattered Polaroids Gallery

Fullscreen Overlay Effects

Some simple and creative overlay styles and effects

How to Create a Tiled Background Slideshow

A tutorial that shows how to recreate the four tiles slideshow effect seen on the website of Serge Thoroval. Using 3D transforms, transitions and animations, the aim is to implement a smooth effect and add some variations.

Read the tutorial

Creating a Border Animation Effect with SVG and CSS

The website of Carl Philipe Brenner has some very creative and subtle animations and in this tutorial we want to explore how to recreate a border animation effect using CSS transitions on SVG lines.

Read the tutorial

Notification Styles Inspiration

Simple ideas & effects for website notifications

Morphing Buttons Concept

Some inspiration for a morphing button concept where the action element (button) morphs into a component. The examples show different types of components, i.e. fullscreen overlay, modal window, sidebar and more.

Read the tutorial

Recreating the “Design Samsung” Grid Loading Effect

A tutorial on how to achieve the grid loading effect seen on the "Design Samsung" site. The effect will show a colored element sliding in first and then sliding out again, revealing the image.

Read the tutorial

Off-Canvas Menu Effects

Some inspiration for off-canvas menu effects and styles using CSS transitions and SVG path animations.

Inspiration for Custom Select Elements

Some inspiration for styling a custom version of the select element

Tilted Content Slideshow

A tutorial on how to recreate the slideshow seen on the FWA landing page with 3D effects involving random animations.

Read the tutorial

Hover Effect Ideas

An inspirational collection of subtle hover effects

Making SVGs Responsive with CSS

An article on how to make embedded SVGs cross-browser responsive. We're going to cover embedding techniques, how to apply the "Padding Hack" and how to use inline media queries to make SVGs adaptive.

Read the tutorial

Sliding Header Layout

A tutorial on how to create a simple layout with a fullscreen header that slides up to reveal a content area with an image grid.

Read the tutorial

Page Preloading Effect

A tutorial on how to re-create the page preloading effect seen on the website of Fontface Ninja. We are going to use CSS animations, 3D transforms and SVGs.

Read the tutorial

Elastic SVG Elements

Wobbly Slideshow Effect

Resizing and Cropping Images with Canvas

Learn how to resize and crop images using JavaScript and the HTML5 Canvas element using controls, commonly seen in photo editing applications.

Read the tutorial

Minimal Form Interface

Fullscreen Form Interface

Simple Morphing Search

Animated Background Headers

Inspiration for Item Transitions

Some inspiration and ideas for item transitions considering different scenarios and use cases, including a small component, a full-width image header and a product image with a transparent background. State transitions are done using CSS Animations.

Drag and Drop Interaction Ideas

3D Grid Effect

"Look Inside" Book Preview

Tab Styles Inspiration

A couple of modern and subtle tab styles and effects for your inspiration. We use pseudo-elements, SVGs and CSS transitions for some of the techniques.

Arrow Navigation Styles

Some inspiration for arrow navigation styles and hover effects using SVG icons for the arrows, and CSS transitions and animations for the effects.

View the demo

Tooltip Styles Inspiration

A small collection of various hover tooltip styles and effects for your inspiration. Using CSS transforms, border-radius and SVG shapes we can create modern looking and interesting tooltips.

Inspiration for Dialog Effects

A small collection of dialog effects using CSS animations for your inspiration. Some effects use SVG animations of morphing paths with the help of Snap.svg.

Page Loading Effects

A set of creative page loading effects that use SVG animations with Snap.svg. The idea is to show an overlay with a interesting shape animation while new content gets loaded.

Inspiration for Inline Anchor Styles

Some inspiration for creative and modern inline anchor styles and hover effects using different techniques like pseudo-element transitions and SVGs.

Freebies

We're so happy to have published a couple of great Freebies by some really talented folks. The beautiful one-page HTML template "Halcyon Days" by Peter Finlan was the most downloaded one.

"Halcyon Days" One Page Website Template
"Walk & Ride" One Page Website Template
Helium Icon Set
Travel and Ecology Icon Set
Ballicons 2 Vol. 2 Free Version
32 Hipster Badges
Jellycons iOS8 App Icons
Flat Style Squared Preloaders

Collectives

Our weekly web design and development news have reached 148 issues! We continue to pick the latest resources, tools and inspiring articles every week.

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