Collective #50

Inspirational Website of the Week

The blog and playground of interactive developer Stephen Burgess is our pick this week. It's super-stylish and has some subtle and interesting animations.

Textillate.js: Plugin for CSS3 Text Animations

Textillate.js by Jordan Schroter is an ease-to-use jQuery plugin for applying CSS3 animations to any text. It uses lettering.js and animate.css.

Lazy Line Painter

Lazy Line Painter is an awesome jQuery plugin by Cam O'Connell for SVG path animations. It uses the Raphaël library.

Carousel Interaction Stats

A very interesting study by Erik Runyon on real interaction statistics of carousels. A great discussion follows.

Squishy Toggle Buttons

Justin WIndle created some really awesome buttons that simulate squishy rubber (elastomer) buttons, inspired by designs on Dribbble.

Dig deep into CSS gradients

A color wheel with CSS gradients? Ana Tudor gives us some great insight into CSS gradients and what we can do with them.

Make a Web App with Instagram-like Filters

An awesome tutorial by Martin Angelov on how to create a web app that allows you to drag a photo from your computer into the browser window, and apply Instagram-like filters to it.

Roole: A language that compiles to CSS

Roole is inspired by other CSS preprocessing languages like Sass, LESS and Stylus and it is implemented in JavaScript, so it can be run both on the server side (via node.js) or in a browser (run unit tests to check if Roole works in your browser).

REMux: An Experimental Approach to Responsive Web Design

An interesting take on responsive web design by Dirk Lüth for CSS-Tricks, involving fluid column widths being set in rem units.

Useful Snippets from Code Pad

Some really useful snippets from Code Pad that will make your life easier: SVG to PNG Fallback for Images, Media Queries - Retina, Preserve HTML font-size When iPhone Orientation Changes and CSS (WebKit) filters

iLightBox

iLightBox is a fresh and revolutionary jQuery lightbox plugin that is packed with features: it comes with fullscreen, retina-ready skins, supports for swipe events, Youtube and Vimeo integration for HTML5 video, and a powerful Javascript API.

How To Create a Simple Collapsing Header Effect

A tutorial by Chris Spooner on how to create a collapsing header effect, where the page header or banner gradually shortens and disappear upon page scroll.

Using background clip for text with CSS fallback

Divya Manian explains how to use the non-standard, but really useful, background-clip: text with a JS-free fallback.

Csswizardry-grids

Csswizardry-grids by Harry Roberts is a simple, fluid, nestable, flexible, Sass-based and responsive grid system.

Where to Start

Trent Walton gives some great advice on one of the hardest parts of making the transition to building responsive websites: getting started.

Photoshop Etiquette

A great article by Veerle Pieters on one of the lesser talked about, but very important parts of using and creating with Photoshop: organization.

Free Font: NIEWE

Niewe is a unique display font that comes with four styles by Zyan Graphics.

Polaris UI Kit + Linecons Icon Set (AI, PDF, PNG, PSD, SVG)

A beautiful UI Kit and a stunning vector icon set created by the Designmodo team.

Social Fish Freebie (PSD)

Meghan Robichaud offers these absolutely adorable social fish icons from her website for free.

Don’t Put Labels Inside Text Boxes (Unless You're Luke W)

Should you put labels into text boxes? Caroline Jarrett gives a great overview on why that might not be a good idea.

Cool Kitten

Cool Kitten is a parallax scrolling responsive framework (beta) developed by Jalxob.

Packery preview

Packery is a promising new layout library which will resolve two of the biggest and oldest issues with Masonry or Isotope, the previous libraries by David DeSandro.

BLOKK: Free Mockup Font

If your clients don't dig Lorem Ipsum or any other strange filler text, you can try BLOKK which is a free font for quick mock-ups and wireframing.

Kitchen Cooking Vector Set

If you need to design something cooking-related you'll definitely find this free vector set by Jim Viola very useful.