Collective #61
Inspirational Website of the Week
Adam Hartwig's website is just an explosion of creativity; it's incredible fun to explore it. Our favorite this week.
Get inspiredWeb Colour Data
An excellent tool to discover the colors of a website and get a better insight on what colors are used in which types of design. Made by Ri Liu and Bo Jeanes.
Check it outThank God We Have A Specification!
Rodney Rehm puts together a collection of useful things to know about CSS transitions, the quirks and issues and some tips on how to avoid the pitfalls.
Read itInfographic Design Process
Veerle Pieters gives us some inspiring insight on her work process using one of her latest infographic projects. A great read for any graphic designer.
Read itThe Nature of Problems
Read about the very nature of problems, the (wrong) ideas that we have about them and how important it is to recognize them for what they are, in this article by Frank Chimero.
Read itBklyn Icon Set
Bklyn is a free little icon set that symbolizes contemporary Brooklyn culture. It was designed by Gulay Inceoglu.
Get itEditr
Editr by Kasper Mikiewicz is an open-source, ACE based HTML, CSS and JavaScript playground that you can easily setup and host on your server.
Check it outFree Font: Verb Condensed Extralight
Verb Condensed from Yellow Design Studio is a modestly condensed version of the original Verb family, taking on more classic sans-serif proportions. You can get the Extralight style for free.
Get itAnimating with Physics
Ben Taylor talks about the difference between classic UI animations and the use of a physics engine to simulate more real animations in applications.
Read itYour First Backbone.js App – Service Chooser
In this tutorial by Martin Angelov you can learn how to create a service chooser form with Backbone.js which lets you choose a set of items from a list.
Check it outClown Car Technique for Responsive Images
A brilliant and interesting technique by Estelle Weyl for serving responsive images using SVG and media queries.
Check it outFlexgrid: a flexbox-based CSS grid
Flexgrid is a promising looking, next-generation web page layout framework based on flexbox. It uses the same responsive 12 column grid and CSS class names as Bootstrap.
Check it outUnderstand CSS Background Size
A very useful demo by Heri Setiawan that will enlighten you on how background-size and background-position work.
Check it outCreating a Radial Menu in CSS
Ana Tudor's created this radial menu with some wicked CSS techniques.
Check it outHyperspace
Noah Blon catapults you through space with Warp speed in this awesome pen.
Check it outResponsive Inspector
A Chrome extension for visually inspecting media queries and toggling breakpoints by Piotr Walczyszyn and Filip Łysyszyn.
Get itSnap.js
Snap.js is an excellent library by Jacob Kelley for creating beautiful mobile shelfs in JavaScript. Check out the demo and drag to the sides to reveal the menus.
Check it outSpring Time Icon Pack (AI)
A beautifully designed set of spring time icons made by Zachary VanDeHey.
Get itFreebie: Flat iOS Icons (PSD)
Thomas Giavarini created this set of pixel-perfect flat iOS icons.
Get itjQuery Annotated Source
Dig deep into the source of jQuery with this fantastic book-like way of showing the source code. Made by Rob Flaherty.
Read itPocket Pictograms
A beautiful collection of illustrations by Ed Harrison based on pocket-sized objects presented in an interesting way.
Check it outCake
Marco Barría created this super-cute cake with a fantastic, animated candle flame in Codepen.
Check it outFree Font: Weather Icon Font
Some really nice and clean weather icons that can be used freely in non-commercial projects. Made by Lukas Bischoff.
Get itFree Font: Estragon Free
Estragon, designed by Johannes Steil, is a vivid sans-serif text face with venetian influences, suitable especially for books. There is a free version available.
Get it