Collective #169

Inspirational Website of the Week: DreamTeam Katarzyna Konkowska
A stunning web experience with smooth animations and an explosion of creativity. Our pick this week.
Get inspired
Art-Directing SVG Images With The viewBox Attribute
A brilliant article by Sara Soueidan on how to use the SVG viewBox attribute for effortless art direction.
Read it
SmartIcons
A fantastic icon app and system that will give you more freedom for styling and using SVG icons.
Get it
Revisiting :Visited
A great article on the forgotten and underused :visited pseudo-class by Joel Califa.
Read it
Bukku: HTML/CSS Template
A gorgeous HTML template with PSD by Filip Petrovic and Luka Cvetinovic. Have a look at the preview.
Check it out
Simplify Your Stylesheets With The Magical CSS Viewport Units
Learn how to utilize the super-useful viewport units. A tutorial by Danny Markov from Tutorialzine.
Read it
The End of Global CSS
A brilliant article by Mark Dalgleish on how to achieve true modularization of CSS with WebPack.
Read it
Testing For And With Windows Phone
Daniel Herken shows some tips and tools for testing with a Windows Phone.
Check it out
The Ryanair approach to progressive enhancement
An enlightening article by Christian Heilmann with a brilliant analogy to progressive enhancement.
Read it
Free Font: Ikaros
Matt Ellis designed this beautiful typeface and offers it for free.
Get it
231 Micons (AI, SVG)
A lovely set of 231 clean icons desgined by Cosmin Negoita for Iconjar.
Get it
Illustrized
A really cool Google Experiment by Yuichiroh Arai's with WebGL and web cam input.
Check it out
Easy Cross-Browser Text Masks with Blend Modes
Dudley Storey's smart text-clipping technique using CSS Blend Modes.
Check it out
Awesome - A curated list of awesome lists
An awesome curated list of awesome curated lists by Sindre Sorhus :)
Check it out
How to make a carousel using only HTML and CSS (no JavaScript required!)
Dan Cortes' nice solution for a carousel without JavaScript.
Check it out
If you can draw these three shapes, you can draw the Internet
A great tutorial by James Buckhouse on how to draw anything with three basic shapes.
Check it out
Extending Styles
Following Simurai's article on how to extend styles, Philip Walton shares his thoughts on the topic.
Read it
Getting Dicey With Flexbox
A brilliant way to understand and learn flexbox: Landon Schropp shows how to create dice faces using flexbox.
Check it out
Using canvas to fix SVG scaling in Internet Explorer
A clever canvas-based hack for fixing SVG scaling in IE by Nicolas Gallagher.
Check it out
Making the transition from animating in After Effects to CSS
Not from this week but definitely worth a read if you use AE: Ryan Brownhill guides you through the transition of animating in AE to CSS.
Read it