Collective #675
Inspirational Website of the Week: Kookslams Hard Seltzer
A very fresh design with great summer vibes and lots of fun details. Our pick this week!
Get inspired
Seamless creation from concept to production with Editor X
Create dynamic and powerful web experiences with responsive CSS combined with smooth drag & drop.
Check it out
Smooth and simple page transitions with the shared element transition API
Learn how to use shared element transitions in this article by Jake Archibald.
Check it out
CSS accent-color
Learn how to bring your brand color to built-in HTML form inputs with one line of code.
Check it out
Breaking the web forward
A sobering article by Peter-Paul Koch on the current lamentable state of browsers and the web where “[c]omplex systems and arrogant priests rule”.
Read it
Practical Uses of CSS Math Functions: calc, clamp, min, max
Review the four best supported CSS math functions, and see how they can be used in both practical and unexpected ways, such as within gradients and color functions and in combination with CSS custom properties. By Stephanie Eckles.
Read it
Building a Cool Front End Thing Generator
John Polacek shows how building a tool that can generate some cool front-end magic can help you learn something new, develop your skills and maybe even get you a little notoriety.
Read it
A guide to designing accessible, WCAG-compliant focus indicators
A helpful reference aimed at both designers who want to learn about accessibility considerations for designing focus indicators, as well as developers who want to implement them. By Sara Soueidan.
Read it
Why lab and field data can be different (and what to do about it)
Learn why tools that monitor Core Web Vitals metrics may report different numbers, and how to interpret those differences. By Philip Walton.
Read it
Responsive CSS Food Truck
An amazing demo by Adam Kuhn!
Check it out
Star Rating: An SVG Solution
An exploration of how to implement a star rating with SVG that includes half a star.
Read it
GSAP + React, First Steps & Handy Techniques
Get started using GSAP in React to build fast, powerful JavaScript animations that work everywhere.
Read it
Improving responsiveness in text inputs
Nolan Lawson explains how to make slow inputs faster.
Read it
Introducing MIDIVal: the easiest way to interact with MIDI in your browser
Kacper Kula introduces MIDIVal, a platform-agnostic library for all your MIDI needs.
Read it
Akari 1A • Pure CSS • repeating-radial-gradient
Aris Acoba made this beautiful demo using some cool gradients.
Check it out
Building a switch component
A foundational overview by Adam Argyle of how to build a responsive and accessible switch component.
Read it
Sentence Forms (not Mad Libs)
Adrian Roselli dives into sentence forms, or narrative forms and writes about their challenges.
Check it out
HTML is Not a Programming Language?
Alvaro Montoro shows that the three main arguments used for claiming that HTML is not a programming language are flawed or incorrect.
Read it
CSS Pencil
Very nice CSS only work by Kass.
Check it out
MSI – The Match Maker
Supercool web game design: match with a similar player and test your skills in a series of mini games.
Check it out
CSS Drummer
An animated CSS drummer made by Deren.
Check it out
CSS Grid tooling in DevTools
Changhao Han shows how to use CSS Grid tooling in DevTools to better understand what CSS code is doing.
Read it
Create an Abstract Image Slideshow with OGL, GLSL, and GSAP
Learn how to create a WebGL-powered image slideshow animated using a single value.
Read it