{"id":3103,"date":"2024-07-23T12:29:41","date_gmt":"2024-07-23T17:29:41","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=3103"},"modified":"2024-07-24T06:55:17","modified_gmt":"2024-07-24T11:55:17","slug":"clip-pathing-color-changes","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/clip-pathing-color-changes\/","title":{"rendered":"Clip Pathing Color Changes"},"content":{"rendered":"\n

This is a nice post from Emil Kowalski<\/a> on usage of the clip-path<\/code> property<\/a> in CSS. I’ve always liked clip-path<\/code>. Maybe it’s because it’s such a sharp knife. When you clip an element, it’s clipped<\/em>, yo. There isn’t a lot of nuance to it, it does what it does. But moreso, I think I like the connection to SVG (oh, hey, by the way, I just made my old book Practical SVG<\/a> entirely free). The value that you give clip-path<\/code> is stuff like circle()<\/code>, polygon()<\/code>, path()<\/code>, etc \u2014 the primitive shapes of SVG.<\/p>\n\n\n\n

In Emil’s post, my favorite example is a navigation bar where a “pill” shape animates from one navigation item to another when they are clicked. The pill is a different background color, and so the text color also changes. (If you’re over 100 years old like me, we used to call this kind of thing “lava lamp” navigation<\/a> \ud83d\udc74).<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

I would guess most people would assume what is happening here is an extra element set behind the links that moves position to underneath the newly active links. You could<\/em> do it that way, but there is a minor aesthetic issue with it. Because the background-color<\/code> is changing here, the text also needs to change appropriately (from dark to light here). You could change that color instantly, but that will look weird like it’s changing too early. You could set a transition<\/code> on it, but you’ll never get the fade to look quite right, especially as it has to go through an awkward gray color. <\/p>\n\n\n\n

Essentially, you’ll never<\/em> get a state like this:<\/p>\n\n\n

\n
\"\"
This ain’t gonna happen with an underlay element alone.<\/figcaption><\/figure>\n<\/div>\n\n\n

See how the text is half-light and half-dark mid-animation when the highlight blue pill moves from one to another? That’s a lovely effect that makes this feel very polished and smooth. This idea first came from a tweet by Paco<\/a>. Like Emil says:<\/p>\n\n\n\n

\n

You might say that not everyone is going to notice the difference, but I truly believe that small details like this add up and make the experience feel more polished. Even if they go unnoticed.<\/p>\n<\/blockquote>\n\n\n\n

Agreed. <\/p>\n\n\n\n

In Emil’s post, it’s done with React. That’s totally fine, but I figured I’d make a vanilla one for y’all here:<\/p>\n\n\n\n