Drawing CSS Shapes using corner-shape
After you’ve got a `border-radius`, you can control the shape of the corner with `corner-shape`, which unlocks a simpler and more powerful way to make shapes compared to `clip-path()`.
Blog Post Articles
Scope in CSS
We’ve got @scope in CSS now, and it’s got it’s uses. But the concept of scope in CSS is a wider idea.
Grainy Gradients
This is about reducing banding effects in gradients by introducing noise. A nice approach is a displacement map using SVG filters.
1fr 1fr vs auto auto vs 50% 50%
There are several different ways to do equal width columns. But some are, uh, more equal than others.
Scroll-Driven Letter Grid
scroll-timelines go from 0 to 100. Many variable fonts axis have similar ranges, like 100 to 900. Surely that’s begging for interplay.
firstChild can be white space
Just a tiny gotcha.
The Simplest Way to Deploy Your Own Updatable Portfolio Site
For the true beginners out there! We’ll put the files in a GitHub repo and connect it to Netlify to host it.
CSS Spotlight Effect
We can pass the mouse position from JavaScript to CSS and use it to make unusual and playful effects.
Move Modal in on a… shape()
Got an old “modal” design? Now might be the time to upgrade it to a
ChatGPT and the proliferation of obsolete and broken solutions to problems we hadn’t had for over half a decade before its launch
It was a lovely day on the internet when someone asked how to CSS animated gradient text like ChatGPT’s “Searching the web” and promptly got an answer saying “Have you tried asking ChatGPT? Here’s what it told me!” – well, maybe not these exact words, but at least it rhymes. Both the question and this […]