Adaptar texto a la silueta de una imagen

Adaptar parrafos a la silueta de imagen en formato png con css, en este caso elegimos una imagen png del Perú.

Implementar esta característica es relativamente sencillo con css3, pues anteriormente  era casi o mejor dicho imposible solo con css.

Trataremos de adaptar un parrafo al lado derecho de una imagen del Perú.

Veamos el código completo:

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>TEXTO ADAPTABLE A IMAGEN</title>
	<style>
	.forma{
		shape-outside: url(peru.png);
		shape-image-threshold: 0.5;
		shape-margin: 20px;
		float: left;
	}
	p{
		text-align: justify;
	}

	</style>
</head>
<body>
<img src="peru.png" alt="" class="forma">
<h2>TEXTO ADAPTABLE A IMAGEN</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos voluptate possimus laboriosam optio labore quod explicabo aliquam sequi aperiam inventore nulla at, dolorem. Sapiente asperiores error molestiae similique, delectus harum! 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum voluptatum iure vel quo, officia perferendis id eligendi omnis magnam ipsum deserunt ad sequi quod aspernatur, odio illo aliquam voluptate architecto!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio vitae facere, ducimus culpa sunt sit sint dicta obcaecati aliquam officia aut molestias officiis sequi, mollitia error odit dolorem ratione tempore. </p>	
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos voluptate possimus laboriosam optio labore quod explicabo aliquam sequi aperiam inventore nulla at, dolorem. Sapiente asperiores error molestiae similique, delectus harum! 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum voluptatum iure vel quo, officia perferendis id eligendi omnis magnam ipsum deserunt ad sequi quod aspernatur, odio illo aliquam voluptate architecto!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio vitae facere, ducimus culpa sunt sit sint dicta obcaecati aliquam officia aut molestias officiis sequi, mollitia error odit dolorem ratione tempore. </p>	
</body>
</html>

Veamos

VIDEO Cómo adaptar texto al borde de una imagen png con CSS

Visitas: 228 | Publicado:2018-12-24 21:25:48

Más publicaciones de CSS que te pueden interesar:

Facebook Twitter Youtube Pinterest Wordpress Google Plus

:: Calle Paucarpata 130 Of. 212 2do Piso CC. AQPcompucentro ::
:: © Todos los derechos reservados APPTIVA WEB | Arequipa Perú 2010-2018 ::