Collective #87

View All

Snap.svg * Cargo Cult CSS * Smart Transitions in UX Design * Zombie Parallax Scrolling * Offline.js * doCapture * Stereoscopic CSS

Collective87

Inspirational Website of the Week

Collective87_bananacafe

Banana Café surprises with a colorful them and some pretty cool 3D hover effects. Our pick this week.

Get inspired

Smart Transitions In User Experience Design

Collective87_transitions

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 it

Calculating element vertex data from CSS transforms

Collective87_vertexdata

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 out

Cargo Cult CSS

Collective87_cargokult

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 it
Advertisement

Creating game-style parallax scrolling: Zombie Edition

Collective87_zombie

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 out

Free Font: Chula

Collective87_chula

Gabriela Roh shares this delicate and fashionable font for free.

Get it

Snap.svg

Collective87_Snap

From the creator of Raphaël, Dmitry Baranovskiy, comes another fantastic library that makes working with SVG super easy.

Check it out

Offline.js

Collective87_offline

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 out

doCapture

Collective87_doCapture

With doCapture you can create high-res website screen captures in the exact size you need.

Check it out

Content Snippets

Collective87_contentsnippets

Content Snippets collects specific copy examples from websites and applications, to serve as inspiration for writing professionals.

Check it out

Stereoscopic CSS

Collective87_stereoscopic

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 out

180 Beautiful Flat Icons (AI, EPS,PDF, PNG)

Collective87_flaticons

A great set of 90 flat round icons in two variations by Elegant Themes.

Get it

Newton

Collective87_newton

Newton is an easy-to-use, feature-rich physics engine for JavaScript created by Hunter Loftis.

Check it out

Using CSS Shapes to Enhance Visual Storytelling

Collective87_cssshapes

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 out

iPad Air (PSD)

Collective87_ipadair

Always offering the most recent device mockups, Pixeden has released yet another excellent vector mockup, this time of the iPad Air.

Get it

Opening type

Collective87_openingtype

A fantastic pen by Diego Pardo that shows a creative hover effect on cut out letters.

Check it out

Slidr.js

Collective87_slidrjs

Slidr.js is a lightweight JavaScript library by Brian Chan for creating slides with subtle transitions.

Check it out

100 PSD mock-ups (PSD)

Collective87_100mockups

An incredible set of useful product mockups by PSDCovers.com for Webdesigner Depot.

Get it

Avoiding Unnecessary Paints: Animated GIF Edition

Collective87_animatedgif

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 it

iWatch Mock-Up

Collective87_iwatch

An absolutely stunning product concept of a "smartwatch" by Thomas Bogner.

Check it out

Remote Jobs

Collective87_remotejobs

A great new site for finding remote job openings for web professionals.

Check it out

Flat Design User Interface Elements (PSD)

Collective87_flatui

Marie Dehayes shares this beautiful flat design UI kit for free.

Get it

Gratisography

Collective87_gratisography

On Gratisography you can find free and qualitative high-resolution pictures to use in your personal and commercial projects.

Check it out

Free Font: KOMODA

Collective87_komoda

Joanna Angulska designed this exquisite and beautiful condensed uppercase font.

Get it

Would you like to become a Collective sponsor?

You can sponsor a Collective issue with your own news item. Find out more.

Would you like to send us some news?

The Collective features the latest news and resources from the web design & web development community. If you have spotted or created something that you'd like see published in the next issue, just submit the resource or article here.