Collective #660
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C660_WOTW.jpg)
Inspirational Website of the Week: Paul & Henriette
Sharp minimalism with great typography and a focus on beautiful image and layout animations. Our pick this week.
Get inspired
![Collective 643 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/01/C643_Divi.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.
Check it out
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C660_images.jpg)
The Humble <img> Element And Core Web Vitals
An excerpt from Addy Osmani’s new book Image Optimization.
Read it
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C660_more.jpg)
Portfolio 2021 technical case study — Rendering a whole HTML website in WebGL
Martin Laxenaire shows how he created his portfolio using his own vanilla JavaScript open source tools.
Read it
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C660_containerqueries.jpg)
Container Queries Explainer & Proposal
Miriam Eric Suzanne explains the proposed solution for container queries and shows how to use them.
Read it
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C660_browsers.jpg)
The State of CSS Cross-Browser Development
Ahmad Shadeed thoughts on why cross-browser development is better than in the past.
Read it
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C660_mantine.jpg)
Mantine
Mantine is a React components and hooks library with native dark theme support and focus on usability, accessibility and developer experience.
Check it out
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C660_customproperties.jpg)
Two options for using custom properties
Peter-Paul Koch shares an efficient way of using custom properties for component styling.
Read it
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C660_switch.jpg)
Toggling CSS Custom Properties with Radio Buttons
Michelle Barker explains how to use custom properties for a toggle functionality.
Read it
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C660_iconic.jpg)
Iconic
A fantastic set of pixel-perfect icons with new icons added every week.
Check it out
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C660_scrolling.jpg)
Scroll-Linked Animations with CSS Scroll-Timeline (CSS Café)
Bramus shares his talk covering Scroll-Linked Animations with CSS @scroll-timeline on CSS Café.
Check it out
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C660_fluidtype.jpg)
Fluid Typography
Calculate CSS declarations for beautiful fluid typography headings. Made by Erik André.
Check it out
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C660_golf.jpg)
(t,i,x,y,z) => “creative code golfing”
A minimalist three-dimensional coding environment. Control 8x8x8 dots with a single JavaScript function.
Check it out
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C660_fower.jpg)
Fower
A utility-first CSS-in-JS library for rapid UI development.
Check it out
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C660_cube.jpg)
CSS Cuboid Generator
A fantastic cuboid generator made with React and Prism by Jhey.
Check it out
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C660_webperfomance.jpg)
Profiling site speed with the Chrome DevTools Performance tab
Learn how to use the Chrome DevTools Performance tab to measure and improve the speed of your website.
Read it
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C660_gameshaders.jpg)
3D Game Shaders For Beginners
A step-by-step guide to implementing SSAO, depth of field, lighting, normal mapping, and more for your 3D game.
Check it out
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C660_contrast.jpg)
Exploring color-contrast() for the First Time
Chris Coyier explores the color-contrast() function in CSS which is freshly supported in Safari Technical Preview 122.
Read it
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C660_selection.jpg)
How to Create Actions for Selected Text With the Selection API
Preethi shows how to reveal an options panel when selecting text on a website.
Read it
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C660_function.jpg)
Don’t Confuse Function Expressions and Function Declarations in JavaScript
What are the differences between function declarations and function expressions in JavaScript? Find out in this article by Dmitri Pavlutin.
Read it
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C660_performance.jpg)
Measuring Web Performance in 2021: The Definitive Guide
A guide to the metrics, methods, and measurements of web performance in 2021.
Check it out
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C660_mask.jpg)
Dynamic CSS Masks with Custom Properties and GSAP
Learn how to animate CSS masks based on the cursor position using GSAP and custom properties for a unique spotlight effect in this article by Michelle Barker.
Read it