Collective #53

View All

Lovely CSS Creatures * svg.js * RWD War * WebKit for Developers * Hook.js * HTML5 Forms * Free Fonts * JS Prototypes

Collective 53

Inspirational Website of the Week

Collective53_Ponto

Ponto has a minimal and beautiful design with an interesting, random presentation of their projects on the landing page.

Get inspired

CSS Creatures

Collective53_csscreatures

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 out

Hint.css - A tooltip library in CSS

Collective53_hint

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 out

svg.js - A lightweight JavaScript library for manipulating and animating SVG

Collective53_svgjs

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

WebKit for Developers

Collective53_webkit

Paul Irish explains some very important things about WebKit, mainly what it is and how it's used by WebKit-based browsers.

Read it

Free Font: Global

Collective53_GlobalMediumFont

Dino dos Santos and Pedro Leal designed this clean and beautiful typeface and you can get the three medium styles for free.

Get it

Try jQuery

Collective53_tryjquery

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 out

Spoiler Alert!

Collective53_spoiler

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 out

Hook.js

Collective53_hookjs

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 out

Browserhacks

Collective53_browserhacks

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 out

Discreet Twitter UI

Collective53_twitterui

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 out

How to Create Windows-8-like Animations with CSS3 and jQuery

Collective53_windows8

Learn how to create some stunning Windows 8 style animations in this tutorial by talented Sara Soueidan.

Check it out

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

Carousel Book Layout Using CSS Regions

Collective53_carousel

Tyler Fry created this awesome pen that shows some of the powers of CSS regions with transforms.

Check it out

Loading Animation

Collective53_loading

A very cool CSS loading animation by Diego Pardo. The plastic-like letters fade in and out smoothly.

Check it out

Free Font: Prism

Collective53_PrismFont

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 it

Kontext

Collective53kontext

A context-shift transition inspired by iOS. Created using JavaScript, CSS 3D transforms and CSS Animations by Hakim El Hattab.

Check it out

Free Font: BillMoney

Collective53_billmoney

BillMoney is an unique typeface created by Jeff Schreiber and you can download it for a tweet.

Get it

HTML'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.

Read it

HTML5 forms introduction and new attributes

Collective53_formsnewattrs

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 it

The Problem Of CSS Form Elements

Collective53_formelements

Gabriele Romanato explains the problem of form elements and how the style can be tamed for a consistent look.

Read it

Animated CSS3 Photo Stack

Collective53_photostack

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 out

Typeplate - A typographic starter kit encouraging great type on the Web

Collective53_typeplate

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 it

Make a calculator using JavaScript and CSS3

Collective53_calculator

In this walk-through you'll learn how to create a nice looking calculator with HTML/CSS and some JavaScript.

Check it out

A Plain English Guide to JavaScript Prototypes

Collective53_jsprototypes

Sebastian Porto shares his knowledge and experience with JavaScript's unique take on prototypes.

Read it

Free Font: Savu

Collective53_SavuCondensedFont

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 it

Deeptissue.js

Collective53_deeptissue

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

Do you want to share some interesting news here?

The Collective features the latest news and resources from the web design & web development community. If you have spotted something that you'd like to appear in the next issue, just submit it here