Here's the 227th Weekly Web Design & Development Collective that aims to introduce fresh new, trendy and easy-to-use web design & development resources (freebies, codes, graphics, tools, inspiration, etc) from the past week. Have fun with it and remember to share with your friends.
Text Emoticons Maker
Validate street addresses in nodejs using google geocoding api.
Off-Canvas Navigation With Page Transitions
Enables body scroll locking (for iOS Mobile and Tablet, Android, desktop Safari/Chrome/Firefox) without breaking scrolling of a target element (eg. modal/lightbox/flyouts/nav-menus).
- disables body scroll WITHOUT disabling scroll of a target element
- works on iOS mobile/tablet
- works on Android
- works on Safari desktop
- works on Chrome/Firefox
- works with vanilla JS and frameworks such as React / Angular
- supports nested target elements (eg. a modal that appears on top of a flyout)
- -webkit-overflow-scrolling: touch still works
Reverse Knockout Text
Use an extra-wide SVG to define the shape of an element (e.g., a button), then hide the part you don’t need with overflow:hidden. Use an SVG mask for the reverse knockout effect.
A reveal effect where animated slices cover and uncover an image. Inspired by Zhenya Rynzhuk's transitions experiments.
Given any HTML element, use Chamfer.js to make it have chamfered borders/stroke and optionally a solid fill.