Collective #184

Inspirational Website of the Week: Petas
An elegant design with balanced typography and the right amount of animation made us pick Peta as inspirational website of the week.
Get inspired
Google’s look, evolved
Google has changed their look! Read about the details of this redesign in the official blog entry.
Check it out
Principles Of HTML5 Game Design
Learn how to get started with HTML5 game design in this in-depth article by Kamil Kaniuk and Tomasz Grajewski.
Read it
CSS vs. SVG: Shapes and Arbitrarily-Shaped UI Components
Sara Soueidan explains how to create different shapes with SVG and CSS techniques.
Read it
HTML Color Codes
All the HTML color codes in one place. Made by Dixon & Moe.
Check it out
The anatomy of responsive images
Jake Archibald explains various responsive images use cases and how to implement fitting solutions.
Read it
An Overview of SVG Patterns
Lucas Bebber gives a great overview of SVG patterns and how to use them.
Read it
Squeezebox Portfolio Template
A lovely portfolio showcase template made by Claudia Romano from CodyHouse.
Check it out
HTML5 Deck of Cards
Juha Lindstedt created this versatile deck of cards with lots of different effects.
Check it out
nippleJS
A virtual joystick for touch-capable interfaces by Yoann Moinet.
Check it out
Free Font: Bellico Typeface + Bonus Vectors (OTF, TTF)
A beautiful script typeface with a wide range of alternates available through OpenType features. Designed by Seventh Imperium.
Get it
Apple Music Redesign concept
A beautiful Apple Music redesign concept by Tom Koszyk.
Check it out
What We Talk About When We Talk About Ontology
David Peter Simon dives into ontology and describes why it's so important for designers.
Read it
Quick Tip: The Simplest Way To Center Elements Vertically And Horizontally
Danny Markov from Tutorialzine shows how to easily center elements the modern way.
Check it out
Back To School: Ruled Paper & Lined Text using SVG & CSS
Dudley Storey shows how to create ruled paper with lined text using CSS and SVG.
Check it out
Scroll snapping explained
Sebastian Zartner explains CSS scroll snapping and what you can do with it.
Read it
Vulcan: A JavaScript Automated Proof System
Ryan Marcus built this resolution-based automated proof system as an NPM package.
Check it out
Pixel Map Generator
A great pixel map generator by AM Charts that let's you created customized dotted style maps.
Check it out
Free Font: Atzur
Oscar Cobo designed this interesting typeface and offers it for free.
Get it
Unistyle
Write modular and scalable CSS using the next version of ECMAScript. Made by Joakim Carlstein.
Check it out