Collective #192

Inspirational Website of the Week: Deux Huit Huit
Great typography with smooth effects and smart details made us pick Deux Huit Huit for this week's website inspiration.
Get inspired
Creative Typography with SVG
An great presentation by Brenna O'Brian on SVG typography.
Check it out
atvImg
This lightweight (2kb) plug-in will automatically turn your layered Apple TV PNGs into 3D parallax icons. Made by Drew Wilson.
Check it out
Segment
Segment is a small zero-dependency JavaScript library for drawing and animating SVG path strokes. Made by lmgonzalves.
Check it out
CSSGram
A tiny library for recreating Instagram filters with CSS filters and blend modes. Made by Una Kravets.
Check it out
Animated Intro Section
A collection of creative animated intro effects made by Claudia Romano from Cody House.
Check it out
SVG Path Builder
A great GUI for creating SVG paths quickly. Made by Anthony Dugois.
Check it out
Legofy
Legofy is a python program that takes a static image or GIF and turns it into a LEGO like image. Made by Juan Potato.
Check it out
Songmaker
An in-browser musical experiment using p5.js and the p5.sound library.
Check it out
Introducing Shadow DOM API
Ryosuke Niwa introduces the Shadow DOM API for WebKit.
Check it out
Free Font: Plume
A lovely brush type made by Krisjanis Mezulis.
Get it
Pigeon-js
Pigeon is an HTML preprocessor or template engine written in JavaScript. Made by Alex Suyun.
Check it out
Things To Avoid When Writing CSS
Heydon Pickering's suggestions on what to avoid when writing CSS.
Check it out
Office Icon Set
100 free Web and app UI icons made by Tyler Brooks.
Check it out
Free Font: Cansiparane
Mehmet Metin designed this very creative uppercase display typeface.
Check it out
img2css
A tool that can convert any image into a pure CSS "image" using only box shadows. Made by Javier Bórquez.
Check it out
NavNav
A site that collects responsive navigation examples, demos, and tutorials from all over the web.
Check it out
Interactive Color Photo Highlight Effect In SVG
A cool interactive photo highlight effect made with SVG by Dudley Storey.
Check it out
React Cheat Sheet
A very useful filterable cheat sheet for React made by Michael Chan.
Check it out
ECMAScript 6 (ES6): What's New In The Next Version Of JavaScript
Lars Kappert provides a great overview of all the new features of ES6.
Read it
Angled Edges with CSS Masks and Transforms
Jeremy Frank shows a smart way to create angled edges using CSS masks and transforms.
Check it out