📝 CSS-Tricks 197: CSS Generators, generic-components, and Alpine.js

View this newsletter on the web.

Setting text inside a circle with CSS

I totally forgot that this is possible with the shape-outside CSS property. As Kerry Smyth shows in this demo, we can use that property twice to force text to float around two different paths, giving us shape on both sides (in this case, a circle). It’s neat that browser tools have come so far as to give us this really nice visual representation as we build it, too:

As Kerry mentions in this post, I’m excited for shape-inside which will let us create a shape to wrap the content within an element more naturally, too.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s