Collective #105
Inspirational Website of the Week: Hologram Studio
The website of Hologram Studio has a futuristic touch with some interesting transitions and effects. Our pick this week.
Get inspiredSticker.js
Sticker.js is an awesome JavaScript library that creates a peeling sticker look and interaction on elements.
Check it outCode Guide
Code Guide is a collection of standards for developing flexible, durable, and sustainable HTML and CSS. Curated by GitHub designer Mark Otto.
Check it outOff The Beaten Canvas: Exploring The Potential Of The Off-Canvas Pattern
Kyle Peatt is exploring off-canvas layouts and some interesting use cases in this Smashing Magazine article.
Read itMatter.js
Matter.js is a 2D HTML5 JavaScript physics engine by Liam Brummitt.
Check it outCSS Shake
Sometimes you just need to shake things up a little bit. With CSSShake by Lionel you can easily add some jiggle to elements.
Check it outResponsive Strategy
A great overview of the current strategies that are used to make sites responsive, or better, make them viewable on smaller devices. An article by Brad Frost.
Read itI want to use
Powered by data from caniuse.com, this site tells you how many users will be able to use a specific feature you intend to use in your project.
Check it outAtom
A text editor by GitHub. It's modern, approachable, and hackable to the core, and you can request a beta invite.
Check it outbackground vs background-color CSS Performance Investigation
Learn how to use the timeline in Chrome Dev Tools by watching Paul Irish analyse the performance of background and background-color.
Watch itHonest logos
A very sincere and quite funny logo series that reveals the actual content of a company. A project by Victor Hertz.
Check it outPeek
With Peek you can get a 5-minute video of a real person using your site.
Check it outGmail Redesign Concept
Ruslan Aliev put a lot of creativity and thought into this fantastic Gmail redesign.
Check it outFloat Labels with CSS
A very nice tutorial by Chris Coyier on how to create some floating labels for form inputs.
Check it outAlbumarium – Find & give inspiration
Find and share free images from different categories. A project by Vilem Ries.
Check it outUsing blend modes in HTML Canvas
Learn about canvas blend modes and check out some interesting usage examples in designing games or photo editing.
Check it outThe Troublesome Misconception of Parallax in Web Design
Rob Palmer talks about the misconception of the parallax effect and tries to rectify the erroneous views.
Read itHow Nesting 3D Transformed Elements Works
Ana Tudor will guide you step by step through the process of nesting animated 3D transform elements.
Check it outOnly 90s Web Developers Remember This
Remember using the 1x1.gif for positioning elements? Or abusing on the non-breaking space? Then you might be one of those veteran web developers who will get nostalgic when reading this satiric and delightful article by Zach Holman.
Read itOcean: Realistic water shader for Three.js
A Three.js shader by Jérémy Bouny to provide a realistic plane water effect. It can be used to render water, like a complete ocean or small surfaces of water in real time.
Check it outCircle, square, triangle, dolphin
Literally what it says in the title... be careful, you might want to watch this for at least an hour :) A really nice pen by Max Gruson.
Check it out40 Free Stroke Icons
40 free sample line icons from the Sympletts icon pack by Bogdan Rosu.
Check it outFree Font: Pesaro Light
Pesaro is an elegant new type family by Hoftype and you can get the light style for free.
Check it out