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.
Popular
Latest Articles
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 […]
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.
The Beat
The Height Enigma
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 containers and see how the clip-path responds (path() cannot be fluid, shape() can).
Are SVG <path>s 1-to-1 convertible to shape(), though? Apparently they are! (!!). Two people have already built converters and from what I’ve tested they work great.
- https://css-generators.com/svg-to-css/ Temani Afif
- https://path-to-shape.netlify.app/ Matthew Morete
Out-of-your-face AI
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 I’m doing and offer help”. Personally I’ve gone from, hey that’s nice thanks to woah woah woah, chill out, you’re getting in my way.
I’m sure this will be fascinating to watch for a long time to come. For example, “Subtle Mode” in Zed gets AI more “out of your face” and if you want to see a suggestion, you press a button. I love that idea. But I also understand Kojo Osei’s point here: there should be no AI button.
P3 in Color Inputs
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:
<input
type="color"
value="oklab(59% 0.1 0.1 / 0.5)"
colorspace="display-p3"
alpha
>Code language: HTML, XML (xml)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 produce colors still in the P3 space. And if you’ve set the color space, it gives you a P3 hex code there (which I didn’t even know was a thing honestly). The actual value that you get is like: color(display-p3 0.921957 0.31855 0.969179). Which I guess is fine? Just don’t expect to get out a color in the same format you put in.
Subscribe
Little boosts of front-end development news, information, and advice — right to your feed reader of choice.
RSSWanna write?
Here's our page on guest writing. It's a win-win-win!
Did you know?
Frontend Masters Donates to open source projects. $363,806 contributed to date.