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 outWhy 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 itChristmas Experiments
Christmas Experiments is an advent calendar made by digital artists. Discover some interesting and creative experiments everyday until Christmas.
Check it outParallaxin'
Paul Lewis explains the options and issues you are facing if you are trying to create a smooth parallax effect for your project.
Read itFree Font: Flenja Regular
Flenja is an interesting font family with a lot of character by Sascha Timplan. The regular version is for free.
Get itHTML5 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 outScrolling 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 itGruntStart
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 itCSS 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 itA Responsive Off-Canvas Menu
A great responsive off-canvas menu using CSS transforms and transitions by David Bushell.
Try itDcovery: 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 outjQuery.Shapeshift
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 itPure 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 outTime 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 itInteractive Guide to Blog Typography
A great interactive guide that will help you understand important typography fundamentals.
Check it outWebcam 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 itGiving Content Priority with CSS3 Grid Layout
An in-depth tutorial by Rachel Andrew about how to use the new CSS3 grid layout.
Read itFree Font: Myra Caps
An interesting font with beautiful digit design by Sergiy Tkachenko.
Get itZodiac Signs
A lovely set of zodiac signs by Finbarrs Oketunji.
Get itFree Font: Boffin Regular
Boffin is a nice, technical typeface by Evolutionfonts and the regular weight is offered fro free.
Get itLive 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 outUnderneath – 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 itHow 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