Collective #660


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

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


The Humble <img> Element And Core Web Vitals

An excerpt from Addy Osmani’s new book Image Optimization.

Read it


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


Container Queries Explainer & Proposal

Miriam Eric Suzanne explains the proposed solution for container queries and shows how to use them.

Read it


The State of CSS Cross-Browser Development

Ahmad Shadeed thoughts on why cross-browser development is better than in the past.

Read it


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


Two options for using custom properties

Peter-Paul Koch shares an efficient way of using custom properties for component styling.

Read it


Toggling CSS Custom Properties with Radio Buttons

Michelle Barker explains how to use custom properties for a toggle functionality.

Read it


Iconic

A fantastic set of pixel-perfect icons with new icons added every week.

Check it out


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


Fluid Typography

Calculate CSS declarations for beautiful fluid typography headings. Made by Erik André.

Check it out


(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


Fower

A utility-first CSS-in-JS library for rapid UI development.

Check it out


CSS Cuboid Generator

A fantastic cuboid generator made with React and Prism by Jhey.

Check it out


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


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


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


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


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


Measuring Web Performance in 2021: The Definitive Guide

A guide to the metrics, methods, and measurements of web performance in 2021.

Check it out


From Our Blog

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