Usare le shape-outside nei CSS

La proprietà CSS shape-outside ci permette di controllare come i contenuti vengo visualizzati attorno ad un elemento floated.

In pratica possiamo usarlo anche vicino alle immagini per visualizzarci vicino un testo.

Una cosa che prima richiedeva un pò di lavoro, adesso può essere fatto in poche righe.

Ovviamente questa spiegazione non è molto chiara, me ne rendo conto, quindi facciamo un esempio pratico.

Cominciamo dall'HTML:

<img src="tondo.png">
<p>
	Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
	industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
	scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into
	electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of
	Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like
	Aldus PageMaker including versions of Lorem Ipsum.
</p>

Questo il CSS:

img {
	shape-outside: circle(50%);
	width: 200px;
	height: 200px;
	float: left;
	padding: 20px;
}

p {
	width: 500px;
}

Enjoy!