Exploring the CSS Paint API: Rounding Shapes | CSS-Tricks Adding borders to complex shapes is a pain, but rounding the corner of complex shapes is a nightmare! Luckily, the CSS Paint API is here to the rescue! That’s

I tried an implementation years ago using the (dead?) Paint API

css-tricks.com/exploring-th...

After shape() and border-shape, another great feature in the CSS Shape world is on the way.

I will be missing all the hacky-gradients-math-stuff I was doing 😅

You can rectify the last example using an inset box-shadow
`box-shadow: 0 0 0 999px inset var(--color)`

But I'd rather adjust the code to make the shape "inside" the boundary of the element if you want to use border-shape.

Making Complex CSS Shapes Using shape() | CSS-Tricks Creating rectangles, circles, and rounded rectangles is the basic of CSS. Creating more complex CSS shapes such as triangles, hexagons, stars, hearts, etc. is more challenging but still a simple task ...

You don't need that, it supports the basic CSS animations that you can combine with CSS properties to create any kind of animations.

Check the examples I shared in my latest articles: css-tricks.com/complex-css-...

It's not the border shape that does the drawing, but rather the function used with it. One of the functions is shape(), which has the capabilities of SVG, so I would say you can probably draw everything with it.

Example of shapes created with a single image element

Demo: codepen.io/t_afif/full/... via @codepen.io

There are still rectangles considering the flow and their content but at least the decoration is now following the non-rectangular shape.

Let's Reshape the Web using border-shape! A new property to easily create CSS shapes while preserving borders, shadows, outlines, etc

I am stealing the title idea for my article 🫣

Overview of the border-shape property

💡 CSS Tip!

We've just had the release of @developer.chrome.com 147, which means border-shape was enabled by default! 👀

css-tip.com/border-shape/

Another property to create CSS shapes, but not only that! We can do a lot of fancy stuff with it. Many cool demos/articles are on the way 🤩

Who found the easter egg in my CSS-only Dino game? 🥚

A "rocket mode" to fly above everything! 👀

Give it a try 👇

Who found the easter egg in my CSS-only Dino game? 🥚

A "rocket mode" to fly above everything! 👀

Give it a try 👇

I didn't consider any "tension" when building that line but it's a good idea to have another demo with some physic. Maybe I will make some springs as well 🤓

Bending a straight line using pure CSS?! 👀

Another cool demo in progress powered by border-shape. It's coming to @developer.chrome.com next week! 🤩

Issue #638 - CSS Weekly Learn how corner-shape property works, what’s possible with customizable select, how to create a folding corner effect with CSS, and more.

CSS Weekly #638

Learn about:
💠 corner-shape property
📋 customizable select
📄 folding corner effect
🌗 contrast-color()
➕ and more

Featuring @utilitybend.com, @patrickbrosset.com, @kittygiraudel.com, @una.im, @bram.us, @css-only.dev, @alvaromontoro.com,

cssw.io/issue-638

What?! 👀

Years ago, creating CSS shapes was a tedious task. I had to find workarounds with a lot of gradients and math.

Now, using the shape() function, I can easily create complex shapes and animate them! 👇

I think if we specify the anchor-name and a physical side (top, left, bottom, right) the value should not depend on the property when it's used so it can be a "standalone" pixel value that can be used everywhere.

I needed here: frontendmasters.com/blog/two-cir...

Using it with variables to conditionally do stuff instead of having to create 4 different elements

A crap-ton of shape() inspiration from none other than @css-only.dev to help burn your Thursday.

css-tricks.com/complex-css-...

Years ago, creating CSS shapes was a tedious task. I had to find workarounds with a lot of gradients and math.

Now, using the shape() function, I can easily create complex shapes and animate them! 👇

Yes, I already tried similar thing using view transition but waiting for a few bugs to get fixed before sharing them.

💡 CSS Tip!

A sliding liquid reveal effect, because why not! 🫗

css-tip.com/sliding-liqu...

Another demo powered by shape() and made easy with my online generator: css-generators.com/wavy-divider/

If you play long enough, you can reach the night mode! 👀

Demo: codepen.io/t_afif/full/... via @codepen.io

What the hell is font-width?!! I was doing a perfect! 😫

www.keithcirkel.co.uk/css-or-bs/?r...

If you play long enough, you can reach the night mode! 👀

Demo: codepen.io/t_afif/full/... via @codepen.io

Who did you know I post answers in Stack Overflow? 😅

What's the best way to showcase modern CSS features? By making games!

This time it's the Dino Game 🦖 by @developer.chrome.com

css-tip.com/dino-game/

100% CSS magic playable with the keyboard. Yes, you can jump and crouch with the arrow keys! 👀

Don't search for the JS, there is none.

CSS is simply awesome 🥰

What's the best way to showcase modern CSS features? By making games!

This time it's the Dino Game 🦖 by @developer.chrome.com

css-tip.com/dino-game/

100% CSS magic playable with the keyboard. Yes, you can jump and crouch with the arrow keys! 👀

Don't search for the JS, there is none.

I always redirect people to this answer: stackoverflow.com/a/28420195/8... (It's also a recurrent question in Stack Overflow).

"Specificity has nothing to do with that.": something not easy to digest when it's about selectors.