A weekly collection of design and development goodies - issue #42, featuring Shaded Progress Bars, CSS Image Effects: Vintage Washout, Popmotion, Google Fonts for Icons, SVG-Mesh-3D and more.

  • Shaded Progress Bars: A CSS/Sass Exercise by Rafael González via Codrops

    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.

  • SVG-Mesh-3D by Matt DesLauriers

    A high-level module to convert a SVG <path> string into a 3D triangulated mesh.

  • Popmotion - JavaScript animation, physics and input tracking

    A 12kb JavaScript UI motion engine. Make it pop with animation, input tracking, and physics.

  • CSS Image Effects: Vintage Washout by Una Kravets

    A 12kb JavaScript UI motion engine. Make it pop with animation, input tracking, and physics.

  • Maptia - A World of Stories

    Discover a world of remarkable stories, told by some of the most inspiring photographers, writers, and adventurers on the planet, and to publish and share your stories as part of our thoughtful community.

  • We Love SVG - Google Fonts for Icons by Icons8

 

* We have now embedded pens via CodePen so you can explore them on this page. Click the relevant link/button to view HTML, CSS, JS codes or click 'Edit on CODEPEN' link to go to the CodePen site.