Collective #670
Inspirational Website of the Week: Easy Green
A great combination of shapes, motion and animations. Our pick this week.
Get inspired
Instant websites for your clients with Divi Layout Packs
With the Divi Layout Packs you’ll get world-class designs ready to be used for your client projects.
Check it out
GradientArt
An advanced CSS gradient editor with layers, editing tools and free cloud storage.
Check it out
Building SDF fractal noise
Inigo Quilez wrote an article about natively building SDF fractal noise by iteratively blending spheres as opposed to traditional noise displacement.
Read it
A privacy war is raging inside the W3C
A very interesting article on how the World Wide Web Consortium has become a key battleground in the fight over web privacy and competition.
Read it
gridless.design
A thesis that describes the problems with traditional design techniques when used to prepare web experiences and why the design grid is fundamentally flawed for crafting responsive, reusable interfaces.
Read it
Christmas Collisions
Paul Henschel’s amazing implementation of BestServedBold’s Dribbble shot Christmas Collisions.
Check it out
Frustrating Design Patterns: Broken Filters
Vitaly Friedman writes about how filters can be frustrating and how we can get them right.
Read it
Inline text editor
A free WYSIWYG editor with a clean UI and easy-to-use features to provide a simple and modern JavaScript rich text editor.
Check it out
What’s the difference between the alignment values of start, flex-start, and self-start?
In this article you’ll learn about the difference between the alignment values of start, flex-start, and self-start in flexbox. By Rachel Andrew.
Read it
SVG Favicons in Action
Philippe Bernard’s article about creating an SVG favicon for real.
Read it
Glass UI
Generate CSS and HTML components using the glassmorphism design specifications based on the Glass UI library.
Check it out
Detecting media query support in CSS and JavaScript
Kilian Valkhof shows how to detect support for a media query in CSS and Javascript.
Read it
Average Page Load Time in 2021
In this article, you’ll learn about the average page load time in 2021 and importance of web vitals with additional web vital tips.
Read it
imaskjs
A vanilla JavaScript input mask without external dependencies.
Check it out
Create your first Figma plugin with Svelte
Learn how to setup your Figma plugin dev environment with rollup and svelte for reactive components.
Read it
MeisterNote
MeisterNote is a beautiful, intuitive documentation software that helps teams write and organize information collaboratively.
Check it out
Build Complex CSS Transitions using Custom Properties and cubic-bezier()
Temani Afif shows how to use the @property feature to build complex CSS transitions.
Read it
Building A Dynamic Header With Intersection Observer
Michelle Barker shows how to use Intersection Observer to build a fixed header component that changes when it intersects with different sections of the webpage.
Read it
Lineicons
5000+ essential line icons available in WebFont, SVG, PNG, React, PNG, and PDF Files.
Check it out
Goomics
Take a look behind Google’s corporate curtain with a former employee’s critical comics.
Check it out
WebGL carousel (OGL)
A really cool slideshow made with OGL by Francesco Michelini.
Check it out
76.
A very nice demo where an image gets assembled on scroll. By ycw.
Check it out
Inspirational Websites Roundup #27
A special selection of the most creative and interesting websites from the last weeks.
Check it out
Rock the Stage with a Smooth WebGL Shader Transformation on Scroll
A handy setup to create a smooth scroll based GLSL animation using Three.js and GSAP that you can use to create your own WebGL shader animations.
Check it out