Drawing CSS Shapes using corner-shape92 days ago
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()`.
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()`.
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.
A fun list post from Nic Chan where you check off the funny/sad/proud/weird things we do as front-end developers. I don’t know if a higher score is better, but it certainly means you’ve been around the block. I doubt you’ll be able to resist poking around Nic’s site, it’s really fun.
This is about reducing banding effects in gradients by introducing noise. A nice approach is a displacement map using SVG filters.
There was a lot of interest in our Why Can’t HTML Alone Do Includes? article. I’d like to point you to my ShopTalk Show conversation where we really get into things more with Jake Archibald.
There are several different ways to do equal width columns. But some are, uh, more equal than others.
Fun idea from the team at Immich: Cursed knowledge we have learned as a result of building Immich that we wish we never knew. Stuff like: Fetch requests in Cloudflare Workers use http by default, even if you explicitly specify https, which can often cause redirect loops.
scroll-timelines go from 0 to 100. Many variable fonts axis have similar ranges, like 100 to 900. Surely that's begging for interplay.
You might as well really understand height and Josh Comeau has your back here. It’s really quite different than width and perhaps less intuitive. Plus when grid and flexbox get involved, things change.
Just a tiny gotcha.
We’ve been trying to make the point around here that the new shape() in CSS is awesome. It’s the powerful <path> in SVG ported to CSS so it can use actual units. It’s probably how path() should have ported to begin with, but c’est la vie. I’ll make the point in this demo. Resize those […]
A very interesting aspect of the AI smashing its way into every software product known to man, is how it’s integrated. What does it look like? What does it do? Are we allowed to control it? UX patterns are evolving around this. In coding tools, I’ve felt the bar being turned up on “anticipate what […]
For the true beginners out there! We'll put the files in a GitHub repo and connect it to Netlify to host it.
We can pass the mouse position from JavaScript to CSS and use it to make unusual and playful effects.
I just complained that color inputs couldn’t deal in P3 colors. Looks like Safari is the first-mover on supporting that, as well as alpha: I was able to make a quick demo and see it on iOS: Under the Sliders tab, it’s still just R G & B, but it seems to me you can […]
Got an old "modal" design? Now might be the time to upgrade it to a
I enjoyed this video from Kristian Freeman from Cloudflare on building something quickly with their AutoRAG feature. RAG (Retrieval-Augmented Generation), as I understand it, means that you’re going to ask an AI model a question, but you want that answer informed by a whole corpus of documents. As in, ask the question “how do I […]
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 […]
Blobs! Gooey weird shapes you can fill with any background and even animate.
Google Translate doesn't change the `dir` of a site when translating from LTR to RTL... but you could.