Loading video...

Video Failed to Load

Go Home

CSS Tip 📖 Use CSS shape-outside to wrap text around shapes .column--left .shape { float: right; shape-outside: circle(100px at 100% 50%)); }

486,204 views • 2 years ago •via X (Twitter)

10 Comments

jhey ▲🐻🎈's profile picture
jhey ▲🐻🎈2 years ago

Here's the @CodePen link! 🤙 The trick is to use 2 columns with two elements for shape-outside, a semi-circle for each column 📖 Then you can power it with custom properties as seen in the video above 😎

jhey ▲🐻🎈's profile picture
jhey ▲🐻🎈2 years ago

The only "caveat"? 👀 You're limited in how you use it. You need to split your content into columns manually 🙃 It doesn't play nice with column-count Not the end of the world though and would look nice on some landing pages etc. 🤙

Simon Vrachliotis's profile picture
Simon Vrachliotis2 years ago

Now make the DVD screen saver bouncing thing and the text wraps around it to let it pass

Dheeraj Purohit धीरज पुरोहित ⭕❗⭕'s profile picture
Dheeraj Purohit धीरज पुरोहित ⭕❗⭕2 years ago

Woah 😲✨ Is it all static elements(2 cols and circle) , I mean by position

𝑨𝒏𝒂𝒕𝒉𝒆𝒎𝒂's profile picture
𝑨𝒏𝒂𝒕𝒉𝒆𝒎𝒂2 years ago

Bro nailed it

Airem's profile picture
Airem2 years ago

Shape-outside ? CSS is insane. What's left to add ?

Baiee's profile picture
Baiee2 years ago

service 🔥

jhey ▲🐻🎈's profile picture
jhey ▲🐻🎈2 years ago

Should change my bio 😅 "Demos as a service" "Tag me and demos will follow"

𝐑𝐮𝐬𝐬 🖤's profile picture
𝐑𝐮𝐬𝐬 🖤2 years ago

I wonder if it works with images, I could see some cool stuff being created with this.

Luke Martin's profile picture
Luke Martin2 years ago

Seeing float

Related Videos