Inspirational Websites Roundup #12

Some wonderful sites went live in the past few weeks, setting the stage for some new 2020 trends. Playing with shapes and bold typography seems to be a thing these days while color palettes remain mostly toned down with a vintage touch. Many UI animation surprises await you in this selection, so we hope you…

Collective #584

Optimising SVGs for the Web Michelle Barker shares her process for optimizing SVG assets, which may help you if you’re a designer or developer unfamiliar with working with SVG on the web. Read it Introducing Yarn 2 Maël Nison introduces the new Yarn that comes with fundamental core changes. Read it Our Sponsor Start your…

UI Interactions & Animations Roundup #2

Today have another inspiration set of great UI interactions and animations for you. Many of these shots give some insight to true masterpieces in the making and we’re happy to share these brilliant works with you. We hope you enjoy this special selection and get your creative juices flowing! Pantheone Website by MakeReign Haruki Murakami…

Collective #583

Inspirational Website of the Week: basement.studio Everything on basement is bold: from its striking typography to the brilliant effects and playful interactivity. Fantastic work. Get inspired This content is sponsored via Thought Leaders Clubhouse: Make 2020 your most productive year Clubhouse is a collaborative home for software teams that breaks down silos and brings creators…

How to Unroll Images with Three.js

Do you like to roll up things? Or maybe you prefer rolling them out? I spent my childhood doing crepes. I loved those rolls. I guess, the time has come to unroll all kinds of things, including images. And to unroll as many rolls as possible I decided to automate this process with a bit…

Case Study: itsnotviolent.com

SOS Violence Conjugale is an organization that helps victims of violence with the goal of improving their safety. Their objective with It’s not violent was to implement an awareness campaign educating the target audience on the signs of violence through text messaging, a medium where this subject can be addressed a bit more subtly. Our…

Collective #582

Design System Checklist An open-source checklist to help you plan, build and grow your design system. By Arda Karacizmeli. Check it out CSS Grid Template Areas In Action Ahmad Shadeed explores how to put the grid-template-areas property to use and shares his insights. Read it Our Sponsor Start your own freelance business by becoming a…

Collective #581

Inspirational Website of the Week: NT On Nathan Taylor’s portfolio everything is interactive! A true digital pleasure. Our pick this week. Get inspired Magical Rainbow Gradients with CSS Houdini and React Hooks A great tutorial by Josh Comeau about a very creative way to animate magical gradients! Read it Tiny Helpers Easily find useful single-purpose…

3D Folding Layout Technique for HTML Elements

Today we’re going to take a look at a cool, small technique to bend and fold HTML elements. This technique is not new by any means, it was explored in some previous works and one great example is Romain’s portfolio. It can be used to create interesting and diverse layouts, but please keep in mind…

Collective #580

React-three-fiber v4 Read about all the new things coming with this major release of the react-three-fiber library. Check it out Progressive Web Apps in 2020 Maximiliano Firtman explores how Progressive Web Apps look like in 2020 and what changes the past year has brought to the ecosystem. Read it Our Sponsor Start your own freelance…