When I make an image circular, I find this annoying:
Circular image? Square text? Annoying. I would much rather do this:
Text curving with the image? Much nicer. Thankfully, it's also super easy to pull off.
<div class="container"> <img src="image" /> Lorem ipsum, your text would be here! </div>
This is what your mark up will look like. A container that holds your image and text.
Then your CSS:
.container img { float: left; border-radius: 100%; shape-outside: circle(50%); margin: 0 5px 5px 0; height: 200px; width: 200px; }
- You want to float the image to the left, because it tells the text to wrap around it.
- You want to add in the border radius to make the image into a circle.
- Shape-outside is the magic. It tells the text outside of the image to make a circular shape around the image.
- Margin is just some spacing and the height and width are self-explanatory.
And that's it! Simple and snazzy.
-
1
