Codrops
  • All Posts
  • Demos Hub
  • Webzibition

new-yearroundup

A Look Back at 2015: Round-up of Codrops Resources

In Articles, Dec 31, 2015 by Manoela Ilic

A look back at 2015 with a summary of all Codrops resources. Thank you all for supporting us!

MyThemeShop Membership & MacBook Air Giveaway

In Giveaways, Dec 28, 2015 by Team Codrops

Win an 11-inch MacBook Air, Premium WordPress Theme memberships and more great prices in this giveaway by MyThemeShop.

freebieiconsvg

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.

cosmeticsfoodfreebieicon

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.

canvasmapscrollsvg

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.

buttonmorphingsnap.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.

hoverpricing table

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.

buttonmenusvg

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.

3Dproductslideshow

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”.

canvasrainWebGL

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.

menunavigation

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.

bootstrapfreebietemplate

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.

gridpage 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.

3Dprogresssass

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.

buttonelasticprogresssvg

Elastic Progress

In Playground, Sep 23, 2015 by Lucas Bebber

An elastic SVG progress loader based on the Dribbble shot “Download” by xjw and implemented with SVG and TweenMax.

  • 1
  • 2
  • 3
  • 4
Meco
Meco is a distraction-free space for reading and discovering newsletters, separate from the inbox. Try it, unclutter your inbox.
Scrimba
Want to build websites but don’t know where to start? Scrimba's Frontend Developer Career Path is the perfect beginner-friendly course to kickstart your journey! Created with Mozilla MDN, it teaches you modern web development skills step by step. Codrops readers get 20% off Pro plans!
Explore the site
  • Home
  • Articles
  • Tutorials
  • Playground
  • Demos Hub
  • Webzibition
  • CSS Reference
  • Freebies
  • About
  • Get in touch
  • Subscribe
  • Advertise
  • Privacy Policy
  • License
Follow Codrops
  • LinkedIn
  • Instagram
  • X (Twitter)
  • Bluesky
  • Facebook
  • Telegram
  • RSS Feed
  • GitHub
  • Proudly hosted by Liquid Web hosting Liquid Web logo
  • Content delivered by
  • © Codrops 2025
Support us on Patreon logo