Collective #57
Inspirational Website of the Week

A nice, clean design and an interesting horizontal navigation made us chose heliom as the website of the week.
Get inspirediCheck: Customized checkboxes and radio buttons with jQuery

Damir Foy created iCkeck, a light-weight and easy-to-use jQuery plugin for cross-browser customization of checkboxes and radio buttons.
Check it outHex Color Tool

A great and useful tool created by Denis Leblanc for generating color palettes by adding white or black to a hex color.
Check it outFlat 3D Mockup Kit

An absolutely stylish mockup set by Frank Rapacciuolo for your next app or website showcase. Six mockups are for free and you can get the whole amazing set for only $8.
Get itIntroduction to Custom Filters (aka CSS Shaders)

Read this great article and watch the presentation on CSS Shaders by Paul Lewis on HTML5 Rocks.
Check it outSidr: jQuery plugin for creating side menus

Sidr is a jQuery plugin for creating responsive Facebook-like side menus.
Check it outSkycons

Skycons is a set of ten animated weather glyphs, procedurally generated by JavaScript using the HTML5 canvas tag.
Get itBespoke.js: DIY Presentation Micro-Framework

Mark Dalgleish created Bespoke.js, a presentation framework that works with CSS transitions and supports touch events and keyboard navigation.
Check it outjQuery Pin

A plugin by Mathias Biilmann that let's you create sticky notes to be added to the side of a text.
Check it outMake a 3D iPhone with CSS

Donovan Hutchinson shows us how to create a rotating 3D iPhone with CSS.
Check it outFlat Surface Shader

Simple, lightweight Flat Surface Shader written in JavaScript for rendering lit triangles to a number of contexts. Currently there is support for WebGL, Canvas 2D and SVG. Created by Matthew Wagerfield and Tobias van Schneider.
Check it outResponsive progress meter

This pen by Oliver Turner shows a responsive progress meter created with an interesting technique.
Check it outCSS: Everything is global and how to deal with it
Philip Walton talks about the fundamental workings of CSS - it's global nature and how to make the best of it.
Read it3D-ifying Documents Using CSS Transforms

Cameron Lakenen from Crocodoc explains how they use SVG to do some fancy 3D effects when converting documents.
Check it outApple flat devices (PSD)

Pierre Borodin shares some beautiful flat design Apple devices in PSD format.
Get itDraggabilly

With Dragabilly from David DeSandro you can easily make elements draggble. Great thing: it supports IE8+ and multi-touch.
Check it outPrinting The Web

A great overview by Hans Christian Reinl on how to make a website print-friendly.
Read itGrunge Stamp Borders Multi-Pack

This resource by WeGraphics features 12 grunge stamped style vector borders. A bonus of 8 worn paper textures are included for use with the stamp shapes.
Get itNavigation For Mega-Sites

An interesting article about navigation structures for information-heavy websites by Paul Boag for Smashing Magazine.
Read itFree Font: Quant Light

Another stunning and beautiful font-family by Hoftype: Quant. You can get the light style for free.
Get itEasy High DPI Images

A great guide by Boris Smus on how to serve high quality images on the web without complicated methods, but by changing your workflow and adapting for the future.
Read itPadlet

With Padlet you can create anything on a blank "wall" and share it with others.
Check it out