Frontend Masters Blog
frontendmasters.com/blog/
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()`.
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.
You’re not a front-end developer until you’ve…
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.
Grainy Gradients
This is about reducing banding effects in gradients by introducing noise. A nice approach is a displacement map using SVG filters.
Jake Archibald on Native HTML Includes
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.
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.
Cursed Knowledge
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-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.
The Height Enigma
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.
firstChild can be white space
Just a tiny gotcha.
SVG to shape()
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 […]