Free templates of CSS layout by using shapes
The CSS layout by using shapes
In this post, the CSS shapes are used for creating webpage layouts. FYI, the shape-outside property of CSS can be used for defining the float area for inline content for wrapping around a shape by specifying the shape values like margin-box, content-box, and function values e.g. circle, ellipse etc.
For example, this is how the shape-outside CSS property can be used:
1 2 3 |
-webkit-shape-outside: circle(); shape-outside: circle(); |
OR
1 2 3 |
-webkit-shape-outside: ellipse(); shape-outside: ellipse(); |
Similarly, you may use polygon(20px 20px, 30px 30px, 20px 20px) and inset(30px 20px 30px 20px) etc.
Btw, the purpose of this post is to share the free CSS template based on shape-outside property not explaining this :-).
A demo of creating layout with circle shape-outside
In this demo of creating the CSS template, the circle shape is defined by using the shape-outside property. First, have a look by clicking the links below:
See online demo and code
The CSS:
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 |
body { background-color: #eee; } .container { background-color: #fff; margin: 0 auto; width: 960px; } .container::after { content: ""; clear: both; } .circle-demo-shape { width: 250px; height: 250px; border-radius: 50%; background-color: rgba(203, 150, 150, 0.6); float: left; margin-right: 10px; -webkit-shape-outside: circle(); shape-outside: circle(); } |
The markup:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<main class="container"> <aside class="circle-demo-shape"></aside> <h1>A demo of CSS layout using circle shape</h1> <p>The content of the website comes here. You may use paragraphs, div elements, images or other type of content here. The content of the website comes here. You may use paragraphs, div elements, images or other type of content here. The content of the website comes here. You may use paragraphs, div elements, images or other type of content here.</p> <p>The content of the website comes here. You may use paragraphs, div elements, images or other type of content here. The content of the website comes here. You may use paragraphs, div elements, images or other type of content here. The content of the website comes here. You may use paragraphs, div elements, images or other type of content here.</p> <p>The content of the website comes here. You may use paragraphs, div elements, images or other type of content here. The content of the website comes here. You may use paragraphs, div elements, images or other type of content here. The content of the website comes here. You may use paragraphs, div elements, images or other type of content here.</p> </main> |
A demo of creating layout with Polygon
In this example, the layout is created with the shape-outside and other properties of CSS. The shape-outside is assigned the polygon value as follows:
See online demo and code
The CSS for this demo:
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 |
body { background-color: #eee; } .container { background-color: #fff; margin: 0 auto; width: 700px; } .container::after { content: ""; clear: both; } .polygon-shape-demo { float: left; width: 200px; height: 400px; -webkit-shape-outside: polygon(22% 0, 23% 18%, 79% 25%, 90% 36%, 66% 56%, 75% 80%, 28% 101%, 45% 60%, 45% 40%); shape-outside: polygon(22% 0, 23% 18%, 79% 25%, 90% 36%, 66% 56%, 75% 80%, 28% 101%, 45% 60%, 45% 40%); } |
The markup:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<main class="container"> <aside class="polygon-shape-demo"></aside> <h1>This section uses Polygon shape</h1> <p>The content of the website comes here. You may use paragraphs, div elements, images or other type of content here. The content of the website comes here. You may use paragraphs, div elements, images or other type of content here. The content of the website comes here. You may use paragraphs, div elements, images or other type of content here.</p> <p>The content of the website comes here. You may use paragraphs, div elements, images or other type of content here. The content of the website comes here. You may use paragraphs, div elements, images or other type of content here. The content of the website comes here. You may use paragraphs, div elements, images or other type of content here.</p> <p>The content of the website comes here. You may use paragraphs, div elements, images or other type of content here. The content of the website comes here. You may use paragraphs, div elements, images or other type of content here. The content of the website comes here. You may use paragraphs, div elements, images or other type of content here.</p> <p>The content of the website comes here. You may use paragraphs, div elements, images or other type of content here. The content of the website comes here. You may use paragraphs, div elements, images or other type of content here. The content of the website comes here. You may use paragraphs, div elements, images or other type of content here.</p> <p>The content of the website comes here. You may use paragraphs, div elements, images or other type of content here. The content of the website comes here. You may use paragraphs, div elements, images or other type of content here. The content of the website comes here. You may use paragraphs, div elements, images or other type of content here.</p> </main> |
See the output and get the complete code from the demo page.
Using an image to shape up content
In this demo, an image is used as the value in shape-outside property. Have a look on the live demo where you can see the text is adjusted according to the image shape.
See online demo and code
The CSS:
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 |
body { background-color: #eee; } .container { background-color: #fff; margin: 0 auto; width: 700px; } .container::after { content: ""; clear: both; } img { float: left; -webkit-shape-image-threshold: .9; shape-image-threshold: .9; -webkit-shape-outside: url(images/donut.png); shape-outside: url(images/donut.png); -webkit-shape-margin: 10px; shape-margin: 10px; } |
Get the complete code from the demo page.
A demo with ellipse shape
See this demo where ellipse value is used to shape up content:
See online demo and code
Get the complete code from the demo page.