Bi-Weekly Frontend News

Collective #57

Inspirational Website of the Week

Collective57_heliom

A nice, clean design and an interesting horizontal navigation made us chose heliom as the website of the week.

Get inspired

iCheck: Customized checkboxes and radio buttons with jQuery

Collective57_iCheck

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

Check it out

Hex Color Tool

Collective57_hexcolortool

A great and useful tool created by Denis Leblanc for generating color palettes by adding white or black to a hex color.

Check it out

Flat 3D Mockup Kit

Collective57_flat3d

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 it

Introduction to Custom Filters (aka CSS Shaders)

Collective57_cssshaders

Read this great article and watch the presentation on CSS Shaders by Paul Lewis on HTML5 Rocks.

Check it out
Advertisement

Sidr: jQuery plugin for creating side menus

Collective57_sidr

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

Check it out

Skycons

Collective57_skycons

Skycons is a set of ten animated weather glyphs, procedurally generated by JavaScript using the HTML5 canvas tag.

Get it

Bespoke.js: DIY Presentation Micro-Framework

Collective57_bespoke

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

Check it out

jQuery Pin

Collective57_pinit

A plugin by Mathias Biilmann that let's you create sticky notes to be added to the side of a text.

Check it out

Make a 3D iPhone with CSS

Collective57_cssiphone

Donovan Hutchinson shows us how to create a rotating 3D iPhone with CSS.

Check it out

Flat Surface Shader

Collective57_surfaceshader

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 out

Responsive progress meter

Collective57_progressmeter

This pen by Oliver Turner shows a responsive progress meter created with an interesting technique.

Check it out

CSS: 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 it

3D-ifying Documents Using CSS Transforms

Collective57_doccsstransforms

Cameron Lakenen from Crocodoc explains how they use SVG to do some fancy 3D effects when converting documents.

Check it out

Apple flat devices (PSD)

Collective57_flatdevices

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

Get it

Draggabilly

Collective57_drag

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

Check it out

Printing The Web

Collective57_printtheweb

A great overview by Hans Christian Reinl on how to make a website print-friendly.

Read it

Grunge Stamp Borders Multi-Pack

Collective57_grunge

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 it

Navigation For Mega-Sites

Collective57_megasites

An interesting article about navigation structures for information-heavy websites by Paul Boag for Smashing Magazine.

Read it

Free Font: Quant Light

Collective57_quant

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

Get it

Easy High DPI Images

Collective57_dpiimages

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 it

Padlet

Collective57_padlet

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

Check it out