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.
A set of simple stack effects for inspiration.
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.
Some subtle effects and styles for simple dot navigation
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.
Some simple and creative overlay styles and effects
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.
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.
Simple ideas & effects for website notifications
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.
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.
Some inspiration for off-canvas menu effects and styles using CSS transitions and SVG path animations.
Some inspiration for styling a custom version of the select element
A tutorial on how to recreate the slideshow seen on the FWA landing page with 3D effects involving random animations.
An inspirational collection of subtle hover effects
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.
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.
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.
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.
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.
Some inspiration for arrow navigation styles and hover effects using SVG icons for the arrows, and CSS transitions and animations for the effects.
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.
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.
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.
Some inspiration for creative and modern inline anchor styles and hover effects using different techniques like pseudo-element transitions and SVGs.
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.
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.
A huge thank you goes out to our fantastic contributors who created awesome content for Codrops!
At this point we'd also like to thank BuySellAds.com. They make our work possible!
“Tomorrow, is the first blank page of a 365 page book. Write a good one.” ― Brad Paisley
With this beautiful quote in mind, we wish you all a wonderful 2015!