This content originally appeared on Codrops and was authored by Mary Lou
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/07/C670_WOTW.jpg)
Inspirational Website of the Week: Easy Green
A great combination of shapes, motion and animations. Our pick this week.
![Collective 668 image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/Divi_new.jpg)
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.
![Codrops Collective 670](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/07/C670_gradients.jpg)
GradientArt
An advanced CSS gradient editor with layers, editing tools and free cloud storage.
![Codrops Collective 670](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/07/C670_landscape.jpg)
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.
![Codrops Collective 670](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/07/C670_w3c.jpg)
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.
![Codrops Collective 670](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/07/C670_grid.jpg)
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.
![Codrops Collective 670](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/07/C670_christmas.jpg)
Christmas Collisions
Paul Henschel’s amazing implementation of BestServedBold’s Dribbble shot Christmas Collisions.
![Codrops Collective 670](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/07/C670_filters.jpg)
Frustrating Design Patterns: Broken Filters
Vitaly Friedman writes about how filters can be frustrating and how we can get them right.
![Codrops Collective 670](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/07/C670_line.jpg)
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.
![Codrops Collective 670](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/07/C670_align.jpg)
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.
![Codrops Collective 670](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/07/C670_queries.jpg)
SVG Favicons in Action
Philippe Bernard’s article about creating an SVG favicon for real.
![Codrops Collective 670](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/07/C670_glass.jpg)
Glass UI
Generate CSS and HTML components using the glassmorphism design specifications based on the Glass UI library.
![Codrops Collective 670](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/07/C670_mediaquery.jpg)
Detecting media query support in CSS and JavaScript
Kilian Valkhof shows how to detect support for a media query in CSS and Javascript.
![Codrops Collective 670](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/07/C670_loadingtimes.jpg)
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.
![Codrops Collective 670](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/07/C670_mask.jpg)
imaskjs
A vanilla JavaScript input mask without external dependencies.
![Codrops Collective 670](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/07/C670_figma.jpg)
Create your first Figma plugin with Svelte
Learn how to setup your Figma plugin dev environment with rollup and svelte for reactive components.
![Codrops Collective 670](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/07/C670_note.jpg)
MeisterNote
MeisterNote is a beautiful, intuitive documentation software that helps teams write and organize information collaboratively.
![Codrops Collective 670](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/07/C670_cubicbezier.jpg)
Build Complex CSS Transitions using Custom Properties and cubic-bezier()
Temani Afif shows how to use the @property feature to build complex CSS transitions.
![Codrops Collective 670](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/07/C670_navigation.jpg)
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.
![Codrops Collective 670](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/07/C670_icons.jpg)
Lineicons
5000+ essential line icons available in WebFont, SVG, PNG, React, PNG, and PDF Files.
![Codrops Collective 670](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/07/C670_googl.jpg)
Goomics
Take a look behind Google’s corporate curtain with a former employee’s critical comics.
![Codrops Collective 670](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/07/C670_slideshow.jpg)
WebGL carousel (OGL)
A really cool slideshow made with OGL by Francesco Michelini.
![Codrops Collective 670](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/07/C670_picture.jpg)
76.
A very nice demo where an image gets assembled on scroll. By ycw.
![Codrops Collective 670](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/07/C670_websites.jpg)
Inspirational Websites Roundup #27
A special selection of the most creative and interesting websites from the last weeks.
![Codrops Collective 670](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/07/C670_shaders-1.jpg)
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.
The post Collective #670 appeared first on Codrops.
This content originally appeared on Codrops and was authored by Mary Lou
![](https://www.radiofree.org/wp-content/plugins/print-app/icon.jpg)
Mary Lou | Sciencx (2021-07-15T17:15:15+00:00) Collective #670. Retrieved from https://www.scien.cx/2021/07/15/collective-670/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.