Collective #53
Inspirational Website of the Week
Ponto has a minimal and beautiful design with an interesting, random presentation of their projects on the landing page.
Get inspiredCSS Creatures
A collection of super-cute CSS and HTML creatures with a tweet-to-generate option that will add your own creation. The site was developed by Bennett Feely.
Check it outHint.css - A tooltip library in CSS
Hint.css is a tooltip library written in SASS. It does not rely on any JavaScript, just HTML/CSS, and it uses data-* attribute, pseudo elements, content property and CSS3 transitions to create the tooltips.
Check it outsvg.js - A lightweight JavaScript library for manipulating and animating SVG
If you'd like to use SVG in your web project you'll definitely find this library useful. It's light-weight and comes with many useful features that will take out the pain of using SVG.
Check it outWebKit for Developers
Paul Irish explains some very important things about WebKit, mainly what it is and how it's used by WebKit-based browsers.
Read itFree Font: Global
Dino dos Santos and Pedro Leal designed this clean and beautiful typeface and you can get the three medium styles for free.
Get itTry jQuery
Try jQuery is a combination of videos, interactive console challenges, and writing code in the browser for learning the basic building blocks of jQuery.
Check it outSpoiler Alert!
With the Spoiler Alert script you can simple hide specific parts of text or images with a blur. A hover will reveal a bit more and a click will show the "sharp" content. Developed by Joshua Hull.
Check it outHook.js
Hook.js brings you the mobile "pull to refresh" functionality to the web. Scrolling up again after scrolling down will activate the refresh.
Check it outBrowserhacks
We all know that we shouldn't use them but sometimes browser hacks can come in handy. Browserhacks by Hugo Giraudel and Tim Pietrusky is a useful collection of browser-specific CSS and JavaScript hacks.
Check it outDiscreet Twitter UI
A minimal and interesting UI concept for Twitter buttons by Tim Holman. It only shows the Twitter icon and on hover it will reveal the follow button in a very stylish way.
Check it outHow to Create Windows-8-like Animations with CSS3 and jQuery
Learn how to create some stunning Windows 8 style animations in this tutorial by talented Sara Soueidan.
Check it outResponsive web design: the war has not yet been won
Some very interesting thoughts on RWD by Elliot Jay Stocks with some important points on how some aspects are still misunderstood. An engaging discussion follows.
Read itCarousel Book Layout Using CSS Regions
Tyler Fry created this awesome pen that shows some of the powers of CSS regions with transforms.
Check it outLoading Animation
A very cool CSS loading animation by Diego Pardo. The plastic-like letters fade in and out smoothly.
Check it outFree Font: Prism
Sascha Timplan designed Prims, a typeface that was inspired by the sketches of Rudolf Koch for Prisma and the proportions of Avant Garde by Herb Lubalin. You can get the regular style for free.
Get itKontext
A context-shift transition inspired by iOS. Created using JavaScript, CSS 3D transforms and CSS Animations by Hakim El Hattab.
Check it outFree Font: BillMoney
BillMoney is an unique typeface created by Jeff Schreiber and you can download it for a tweet.
Get itHTML's New Template Tag: Standardizing client-side templating
Eric Bidelman talks about the new <template> element which describes a standard DOM-based approach for client-side templating.
HTML5 forms introduction and new attributes
Learn about HTML5 forms from this excerpt from Chapter 6 of Beginning HTML5 and CSS3: The Web Evolved by Christopher Murphy, Oli Studholme, Richard Clark and Divya Manian. Also, don't miss the next article in the series HTML5 forms input types.
Read itThe Problem Of CSS Form Elements
Gabriele Romanato explains the problem of form elements and how the style can be tamed for a consistent look.
Read itAnimated CSS3 Photo Stack
Learn how to create an animated photo stack, which uses all kinds of fancy effects to transition between a set of images in this tutorial by Martin Angelov.
Check it outTypeplate - A typographic starter kit encouraging great type on the Web
Typeplate is a "typographic starter kit" by Dennis Gaebel that does not make aesthetic design choices, but defines proper markup with extensible styling for common typographic patterns instead.
Get itMake a calculator using JavaScript and CSS3
In this walk-through you'll learn how to create a nice looking calculator with HTML/CSS and some JavaScript.
Check it outA Plain English Guide to JavaScript Prototypes
Sebastian Porto shares his knowledge and experience with JavaScript's unique take on prototypes.
Read itFree Font: Savu
Savu is a hand-lettering font best used as a display typeface. It was published by Hiekka Graphics and the delicate Savu Condensed is available for free.
Get itDeeptissue.js
Deeptissue.js is a helper library to abstract away the differences between the MSPointer and WebKit Touch APIs. It is developed by Chris Love.
Check it out