flexBox/shape.html at master · turbidwater/flexBox · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<html>
<head>
	<title>Shapes</title>
	<style type="text/css">
		html
		{
			font-family: Arial, Helvetica, sans-serif;
		}

		p
		{
			display: block;
		}

		.wrapper
		{
			width: 500px;
		}

		.wrapImage
		{
			float: left;
			/*
			-webkit-shape-outside: circle( 58%, 58%, 58% );
			*/
		}

		.inShape
		{
			/*
			 float: left;
            width: 100%;
            height: 650px;
            -webkit-hyphens: auto;
            -webkit-shape-inside: circle( 58%, 58%, 58% );
            */
           /* overflow: hidden;*/
		}
	</style>
</head>
<body>
	<h1>Shapes Sample</h1>
	<div class="wrapper">
		<img src="images/ruski.png" class="wrapImage" />
		<p>Aliquam quis lectus a nibh bibendum malesuada. Nullam neque est, accumsan quis facilisis eu, tristique vitae ipsum. Ut laoreet mi eu mi lobortis eu interdum sapien sollicitudin. Praesent consequat, dolor eu pellentesque interdum, eros augue tincidunt risus, et tincidunt augue felis et massa. Duis hendrerit bibendum nulla, ac condimentum lectus semper eget. Proin pellentesque venenatis convallis. Phasellus sed ligula eget quam molestie placerat. Proin et ipsum ut lectus volutpat pellentesque. Aenean id libero vel leo tincidunt gravida ut non quam. Etiam ullamcorper auctor est, quis cursus tellus accumsan vitae. Quisque laoreet neque eget felis malesuada ac vestibulum justo faucibus. Duis tincidunt, lectus ac pharetra vestibulum, massa turpis sodales ipsum, at rhoncus enim risus quis nulla. Suspendisse sagittis nunc id arcu pulvinar vestibulum. Etiam quis ipsum lectus.</p>

		<p class="inShape">Aliquam quis lectus a nibh bibendum malesuada. Nullam neque est, accumsan quis facilisis eu, tristique vitae ipsum. Ut laoreet mi eu mi lobortis eu interdum sapien sollicitudin. Praesent consequat, dolor eu pellentesque interdum, eros augue tincidunt risus, et tincidunt augue felis et massa. Duis hendrerit bibendum nulla, ac condimentum lectus semper eget. Proin pellentesque venenatis convallis. Phasellus sed ligula eget quam molestie placerat. Proin et ipsum ut lectus volutpat pellentesque. Aenean id libero vel leo tincidunt gravida ut non quam. Etiam ullamcorper auctor est, quis cursus tellus accumsan vitae. Quisque laoreet neque eget felis malesuada ac vestibulum justo faucibus. Duis tincidunt, lectus ac pharetra vestibulum, massa turpis sodales ipsum, at rhoncus enim risus quis nulla. Suspendisse sagittis nunc id arcu pulvinar vestibulum. Etiam quis ipsum lectus. Aliquam quis lectus a nibh bibendum malesuada. Nullam neque est, accumsan quis facilisis eu, tristique vitae ipsum. Ut laoreet mi eu mi lobortis eu interdum sapien sollicitudin. Praesent consequat, dolor eu pellentesque interdum, eros augue tincidunt risus, et tincidunt augue felis et massa. Duis hendrerit bibendum nulla, ac condimentum lectus semper eget. Proin pellentesque venenatis convallis. Phasellus sed ligula eget quam molestie placerat. Proin et ipsum ut lectus volutpat pellentesque. Aenean id libero vel leo tincidunt gravida ut non quam. Etiam ullamcorper auctor est, quis cursus tellus accumsan vitae. Quisque laoreet neque eget felis malesuada ac vestibulum justo faucibus. Duis tincidunt, lectus ac pharetra vestibulum, massa turpis sodales ipsum, at rhoncus enim risus quis nulla. Suspendisse sagittis nunc id arcu pulvinar vestibulum. Etiam quis ipsum lectus. Proin pellentesque venenatis convallis. Phasellus sed ligula eget quam molestie placerat. Proin et ipsum ut lectus volutpat pellentesque. Aenean id libero vel leo tincidunt gravida ut non quam. Etiam ullamcorper auctor est, quis cursus tellus accumsan vitae. Quisque laoreet neque eget felis malesuada ac vestibulum justo faucibus. Duis tincidunt, lectus ac pharetra vestibulum, massa turpis sodales ipsum, at rhoncus enim risus quis nulla. Suspendisse sagittis nunc id arcu pulvinar vestibulum. Etiam quis ipsum lectus.</p>
	</div>

</body>
</html>