Collective #87
Inspirational Website of the Week
Banana Café surprises with a colorful them and some pretty cool 3D hover effects. Our pick this week.
Get inspiredSmart Transitions In User Experience Design
A very insightful article by Adrian Zumbrunnen on some great examples of smart transitions and subtle animation patterns that improve user experience on websites.
Read itCalculating element vertex data from CSS transforms
Learn how to generate advanced vertex data for CSS transformed elements and see how to use this data to shade elements using a light source in this fantastic article by Keith Clark.
Check it outCargo Cult CSS
A very insightful article by Ben Darlow that dissects the problems of pop methodologies for writing and managing CSS such as OOCSS and BEM.
Read itCreating game-style parallax scrolling: Zombie Edition
Elli Bishop shows you how to do game-style parallax scrolling with a zombielicious demo. Also, check out the interactive Walking Dead infographic to see the concept in action.
Check it outFree Font: Chula
Gabriela Roh shares this delicate and fashionable font for free.
Get itSnap.svg
From the creator of Raphaël, Dmitry Baranovskiy, comes another fantastic library that makes working with SVG super easy.
Check it outOffline.js
Offline.js is a useful library that automatically alerts users when they've lost Internet connectivity. It captures AJAX requests which were made while the connection was down, and remakes them when it's back up.
Check it outdoCapture
With doCapture you can create high-res website screen captures in the exact size you need.
Check it outContent Snippets
Content Snippets collects specific copy examples from websites and applications, to serve as inspiration for writing professionals.
Check it outStereoscopic CSS
Donovan Hutchinson takes 3D-style effects one step further and dives into stereoscopy with a great demo where you need to cross your eyes to see the stunning effect.
Check it out180 Beautiful Flat Icons (AI, EPS,PDF, PNG)
A great set of 90 flat round icons in two variations by Elegant Themes.
Get itNewton
Newton is an easy-to-use, feature-rich physics engine for JavaScript created by Hunter Loftis.
Check it outUsing CSS Shapes to Enhance Visual Storytelling
Peek into the future and read about how CSS Shapes can be applied for creating fantastic "out-of-the-box" layouts. Also, check out the Alice in Wonderland demo code on GitHub. Note that not all browsers support CSS Shapes yet.
Check it outiPad Air (PSD)
Always offering the most recent device mockups, Pixeden has released yet another excellent vector mockup, this time of the iPad Air.
Get itOpening type
A fantastic pen by Diego Pardo that shows a creative hover effect on cut out letters.
Check it outSlidr.js
Slidr.js is a lightweight JavaScript library by Brian Chan for creating slides with subtle transitions.
Check it out100 PSD mock-ups (PSD)
An incredible set of useful product mockups by PSDCovers.com for Webdesigner Depot.
Get itAvoiding Unnecessary Paints: Animated GIF Edition
Paul Lewis explains why animated GIFs can cause unnecessary paints and how to debug and fix that using Chrome DevTools' Show paint rectangles tool.
Read itiWatch Mock-Up
An absolutely stunning product concept of a "smartwatch" by Thomas Bogner.
Check it outRemote Jobs
A great new site for finding remote job openings for web professionals.
Check it outFlat Design User Interface Elements (PSD)
Marie Dehayes shares this beautiful flat design UI kit for free.
Get itGratisography
On Gratisography you can find free and qualitative high-resolution pictures to use in your personal and commercial projects.
Check it outFree Font: KOMODA
Joanna Angulska designed this exquisite and beautiful condensed uppercase font.
Get it