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.

• TRAFFIC (canvas used as mask) by Sascha Sigl

  See the Pen TRAFFIC by Sascha Sigl (@SaschaSigl) on CodePen.

• Preloading animation with velocity.js and CSS3 transitions by Mirko ZoriÄ�

  See the Pen Preloading animation with velocity.js and CSS3 transitions by Mirko Zori� (@fluxus) on CodePen.

• Image Hover With Slide-Out Title by LittleSnippets

  See the Pen #1104 - Image hover with slide out title by LittleSnippets.net (@littlesnippets) on CodePen.

• Elastic Pull To Refresh Concept by Nikolay Talanov

  See the Pen Elastic Pull To Refresh Concept by Nikolay Talanov (@suez) on CodePen.

  Inspired a dribbble shot by Hoang Nguyen