Collective #670

Original Source: http://feedproxy.google.com/~r/tympanus/~3/i4JkHBjvCYU/

Inspirational Website of the Week: Easy Green

A great combination of shapes, motion and animations. Our pick this week.

Get inspired

Our Sponsor
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

From Our Blog
Inspirational Websites Roundup #27

A special selection of the most creative and interesting websites from the last weeks.

Check it out

From Our Blog
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

The post Collective #670 appeared first on Codrops.