CSS Spotlight Effect
We can pass the mouse position from JavaScript to CSS and use it to make unusual and playful effects.
Blog Post Articles
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 […]
Creating Blob Shapes using clip-path: shape()
Blobs! Gooey weird shapes you can fill with any background and even animate.
Is there a Correct Answer? Flipping Layouts When Google Translate Swaps between a Left-to-Right Language and a Right-to-Left Language
Google Translate doesn’t change the `dir` of a site when translating from LTR to RTL… but you could.
Container Query for “is there enough space outside this element?”
A container query can contain viewport units, meaning you can compare the window vs the element and make choices.
Creating Flower Shapes using clip-path: shape()
Use the `arc` command within the `shape()` function we can draw a line that follows a circle from one point to the next, controlling the direction.
shape(): A New Powerful Drawing Syntax in CSS
Don’t underestimate `shape()` — it’s the CSS version of SVG
Using Container Query Units Relative to an Outer Container
Container units (e.g. cqi) are only able to reference the closest container. But if you register a custom property and set that higher up, you can get your hands on other containers units.
Curved Box Cutouts in CSS
Kinda like that “bento box” look.