Get a text around a round image

0
251

This is a very nice trick that can be usefull to a person who wants to add a text around a image with a round circle. Something like this:

How did i did this? It is very easy. This is the test HTML code:

<div class="grid">
<img src="http://dexblog.net/wp-content/uploads/2018/12/12132427_800.jpg" width="300">
</div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dictum ante enim, et ornare augue ullamcorper ut. Ut eleifend mi vitae est dapibus, in luctus est dictum. Curabitur ultrices erat ut libero tincidunt lobortis. Nam eget aliquet ante, vel facilisis eros. Nulla convallis ultricies mauris. Nullam vitae mi urna. Nam vel feugiat erat. Aliquam suscipit sem ut ex facilisis interdum. In hac habitasse platea dictumst. Nulla ut massa posuere dui ullamcorper ultrices. Nulla hendrerit augue ut ipsum aliquet, eget blandit nunc interdum. Etiam congue tortor quis est sollicitudin dictum.
<p>
Mauris et tempor velit, in eleifend neque. Donec posuere augue ac mi blandit, eu mollis dolor accumsan. Vivamus quam nisl, egestas vel leo ac, fermentum lobortis enim. Duis luctus nunc leo, at sagittis lorem feugiat ut. Ut sem velit, faucibus a dui nec, dictum facilisis tortor. In vitae est consequat, rhoncus mi non, imperdiet nunc. <p>Donec nec turpis sit amet eros viverra ullamcorper. Curabitur porta, eros sit amet pulvinar congue, nisi lacus pellentesque ex, sit amet dictum neque erat et sapien. Mauris et dapibus quam. Morbi sed fringilla erat, ut fringilla lorem. Donec eu mi vulputate, aliquam sapien id, gravida velit. Donec interdum sit amet nunc et condimentum. <p>Etiam vehicula egestas tortor. Mauris nec ligula pharetra lorem consequat elementum ac id diam. Sed vulputate mauris nec justo rhoncus hendrerit. <p>Nam pulvinar hendrerit tincidunt.

<p>Quisque eu venenatis orci. Ut nisl nisi, ornare a feugiat sit amet, sagittis eu sapien. Donec ac nisi quis elit egestas pharetra. Nam eu pulvinar ipsum. Aliquam mollis eu leo non consectetur. Etiam lacinia laoreet sem, a varius libero mattis at. Fusce ac nulla elit. Cras faucibus scelerisque cursus. Duis ultrices non elit ut porttitor. <p>Fusce sit amet est nec purus vestibulum suscipit. Maecenas nec enim eget dui vehicula auctor vel ut ante.

And now the CSS code:

.grid {
  width: 300px;
  float: left;
  shape-outside: circle(50%);

}

LEAVE A REPLY

Please enter your comment!
Please enter your name here