All Articles on Codrops

Freebie: Colored Line Icons (SVG, PNG)

In Freebies Dec 23, 2015 by Juan Sarmiento

A set of 30 colored line icons in fresh pastel tones for your next design agency related project. The icons come in vector format (SVG) and PNGs of various sizes.

cosmetics food freebie icon

Freebie: Allergy Info Cosmetic & Food Icons (AI, EPS, PSD, SVG, PNG)

In Freebies Dec 18, 2015 by Catalin Zorzini

A set of 36 carefully crafted allergen-related icons for food and cosmetics. Made by our friends at Vandelay Design exclusively for Codrops readers.

canvas map scroll svg

Animated Map Path for Interactive Storytelling

In Playground Dec 16, 2015 by Lucas Bebber

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

button morphing snap-svg

Shazam-Like Morphing Button Effect

In Tutorials Nov 24, 2015 by Manoela Ilic

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

hover pricing

Some Inspiration for Pricing Tables

In Playground Nov 19, 2015 by Manoela Ilic

A couple of styles and inspiration for responsive, flexbox-based HTML pricing tables.

menu

Multi-Level Menu

In Blueprints Nov 17, 2015 by Manoela Ilic

A simple multi-level menu with delayed item animations and an optional breadcrumb navigation and back button.

button menu svg

Animating an SVG Menu Icon with Segment

In Tutorials Nov 12, 2015 by Luis Goncalves

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.

3d product slideshow

Interactive Room Display

In Playground Nov 10, 2015 by Manoela Ilic

An experimental interactive room slideshow based on the prototype concept by Bilal Mechairia’s Dribbble shot “Spaces”.

canvas rain webgl

Rain & Water Effect Experiments

In Playground Nov 4, 2015 by Lucas Bebber

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

stack

Effect Ideas for Card Stacks

In Playground Oct 28, 2015 by Manoela Ilic

Some effect inspiration for card stacks. The idea is to show animation ideas for positive (accept) or negative (reject) feedback on a generic card element.

mobile

Mobile “Pull to Share” Interaction Experiment

In Playground Oct 23, 2015 by Manoela Ilic

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.

menu navigation

Page Stack Navigation

In Blueprints Oct 21, 2015 by Manoela Ilic

A template for a simple page stack navigation based on the Dribbble shot by Ilya Kostin, Stacked navigation.

bootstrap freebie template

Freebie: “Land.io” UI Kit + Landing Page Template (HTML)

In Freebies Oct 17, 2015 by Taty Grassini

Land.io is a carefully crafted landing page UI kit and landing page template built on Bootstrap 4, designed by Peter Finlan and developed by Taty Grassini.

grid page-transition

Effect Ideas for Image Grids

In Playground Oct 15, 2015 by Manoela Ilic

Some inspiration for effects on image grids. The ideas include animations on the opening grid item, the disappearance of the grid and the resulting view.

3d progress sass

Shaded Progress Bars: A CSS/Sass Exercise

In Tutorials Sep 30, 2015 by Rafael González

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.