Make your text wrap around images perfectly.
By default, text wraps around a boring rectangle. But what if you could make it hug the actual shape of the image?
You can. With just one CSS property:
shape-outside: url(your-img.png);
Add a float and a bit of margin with shape-margin,
and your layout feels instantly more refined.
No JavaScript. No layout hacks. Just native CSS support and it’s supported in over 95% of browsers.
Use it with transparent PNGs, SVGs, or even basic shapes like circle() or polygon().
Ideal for editorial layouts, landing pages, or any design that needs more personality.
Checkout the codepen: https://codepen.io/theosoti/pen/ogjjged
If you liked this tip, you might enjoy the book, which is packed with similar insights to help you build better websites without relying on JavaScript.
Go check it out https://theosoti.com/you-dont-need-js/ and enjoy 20% OFF for a limited time!