Codrops
  • All Posts
  • Demos Hub
  • Webzibition
  • The Collective

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.

freebieiconsvgweb-hosting

Freebie: Web Hosting & Technical Support Icons (AI, EPS, PSD, SVG, PNG)

In Freebies, Sep 18, 2015 by Eezy Inc.

A free set of 36 web hosting and technical support icons in AI, EPS, SVG, PSD and PNG by Vecteezy.

gsapvideo

How to Create a Fullscreen Video Opening Animation

In Tutorials, Sep 17, 2015 by Manoela Ilic

A tutorial on how to create a video opening animation inspired by the effect seen on momentsapp.com.

freebiesketchtemplateui-kit

Freebie: “Land.io” UI Kit + Landing Page Design (Sketch)

In Freebies, Sep 16, 2015 by Peter Finlan

A versatile landing page UI kit designed in Sketch with thoughtfully crafted website elements that will take your website project to the next level.

buttonfileforminput

Styling & Customizing File Inputs the Smart Way

In Tutorials, Sep 15, 2015 by Osvaldas Valutis

A tutorial on how to style and customize <input type=”file”> in a semantic, accessible way using the <label> element and some JavaScript.

buttongsapgoogle-material-designsvg

Creating Material Design Ripple Effects with SVG

In Tutorials, Sep 14, 2015 by Dennis Gaebel

An in-depth tutorial on how to build the ripple effect outlined under Google Material Design’s Radial Action specification and combine it with the powers of SVG and GreenSock.

Wix Studio
Turn your one-off creations into a steady income stream by featuring your templates on the Wix Studio Marketplace. Cash in on your creativity—over and over again.
Readymag
Make designs interactive & publish as websites with Readymag. Transfer anything from Figma to Readymag in 4 clicks with a plugin.
Creative Coding Club
GSAP3: Beyond the Basics Ready to take your GSAP3 skills to the next level? Learn "must know" features of GSAP3 that will open your eyes to new ways of creating and controlling your animations. Use "cdrps" for 20% off!
Explore the site
  • Home
  • Articles
  • Tutorials
  • Playground
  • Demos Hub
  • Webzibition
  • The Collective
  • CSS Reference
  • Freebies
  • About
  • Get in touch
  • Advertise
  • Privacy Policy
  • License
Follow Codrops
  • GitHub
  • Bluesky
  • Instagram
  • Facebook
  • Telegram
  • Mastodon
  • X
  • RSS Feed
  • Proudly hosted by Liquid Web hosting Liquid Web logo
  • Content delivered by
  • © Codrops 2025
Support us on Patreon logo