Collective #43

View All

Performance, performance! * Moving Elements * Christmas Experiments * Free Fonts * CSS Masks * Off-Canvas Menu * Typography

Collective 43

Inspirational Website of the Week


Cheval Blanc's Randheli slideshow is our pick this week. It has a slick smoothness and and an interesting sidebar navigation. The typography with the cut-out letters enhances the elegant design.

Check it out

Why moving elements with translate() is better than pos:abs top/left


After Hugo Giraudel asked the fundamental question on Twitter, Paul Irish explains why moving elements using translate() is better in terms of performance than using absolutely positioned elements and move them manipulating their top/left values. Also check out Chris Coyier's article A Tale of Animation Performance.

Read it

Christmas Experiments


Christmas Experiments is an advent calendar made by digital artists. Discover some interesting and creative experiments everyday until Christmas.

Check it out



Paul Lewis explains the options and issues you are facing if you are trying to create a smooth parallax effect for your project.

Read it

Free Font: Flenja Regular


Flenja is an interesting font family with a lot of character by Sascha Timplan. The regular version is for free.

Get it

HTML5 Bones


Ian Devlin created this "back-to-basics" template that will help you get going in HTML5. Because of its helpful inline comments, it can also be used as a guide when building your own HTML5 page from scratch.

Check it out

Scrolling Performance


Another insightful article from HTML5 Rocks by Paul Lewis about scrolling performance and how to understand and tackle performance issues related to it.

Read it



GruntStart by Tim Svensen gives you the building blocks to quickly get started with Grunt to create an optimized website. Lint, minify and concatenate CSS and JavaScript, and provide simple loss-less image compression throughout a project build.

Try it

CSS Masks – How To Use Masking In CSS Now


Christian Schaefer digs into CSS Masks and shows us some brilliant techniques that can be used right away.

Read it

A Responsive Off-Canvas Menu


A great responsive off-canvas menu using CSS transforms and transitions by David Bushell.

Try it

Dcovery: Travel Research Organizer


Dcovery is a new app that promises stress-free travels by allowing you to collect and organize travel information in a smart way.

Check it out



Inspired heavily by the jQuery Masonry plugin, Shapeshift by Scott Elwood is a jQuery plugin that will dynamically arrange a collection of elements into a grid in their parent container (like on Pinterest).

Get it

Pure CSS no smoking picto


With only two elements, Hugo Giraudel re-created the no smoking sign with CSS. It's a great example of how clip:rect() can be used to create shapes.

Check it out

Time to update your CSS3


A great reminder from David Storey about how to update your CSS3 and which prefixes are actually needed and which ones are not.

Read it

Interactive Guide to Blog Typography


A great interactive guide that will help you understand important typography fundamentals.

Check it out

Webcam Toy


Paul Neave's projects are all mind-blowing and one of his latest projects, the Webcam Toy, got featured as a Chrome Experiment. You can do some fun stuff with your webcam, go and check it out.

Try it

Giving Content Priority with CSS3 Grid Layout


An in-depth tutorial by Rachel Andrew about how to use the new CSS3 grid layout.

Read it

Free Font: Myra Caps


An interesting font with beautiful digit design by Sergiy Tkachenko.

Get it

Zodiac Signs


A lovely set of zodiac signs by Finbarrs Oketunji.

Get it

Free Font: Boffin Regular


Boffin is a nice, technical typeface by Evolutionfonts and the regular weight is offered fro free.

Get it

Live Album Previews with CSS3 and jQuery


A tutorial by Martin Angelov from Tutorialzine on how to create a script for previewing the contents of an album with a slideshow-like animation.

Check it out

Underneath – A Creepy Web Font Kit


A font face that is great for creepy grungy titles by WeGraphics. The download includes everything you need in order to use this font in a web project, including HTML and CSS.

Get it

How to Create a Windows Store app using HTML and JS

Learn how to create a windows store app from this tutorial by the team at MSDN for WebAppers.

Read it

Would you like to become a Collective sponsor?

You can sponsor a Collective issue with your own news item. Find out more.

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