The shape-outside property in CSS is a versatile and powerful tool that allows web developers to define the shape around which content should float. This property is particularly useful for creating more engaging and visually appealing layouts by wrapping text around non-rectangular shapes. By specifying a shape, developers can enhance the overall design and user experience of a webpage.
The shape-outside property enables the creation of complex layouts where text and other inline content can flow naturally around images, shapes, and other elements. This can be especially effective in magazine-style layouts, blogs, and websites where aesthetics play a crucial role. In this article, we will explore the shape-outside property, understand how it works, and see practical examples of its usage.
Understanding the shape-outside Property
The shape-outside property defines a shape that determines how inline content should wrap around an element. This property can take several values, including basic shapes like circle(), ellipse(), inset(), and polygon(), as well as images and URLs that define custom shapes. By leveraging these values, developers can create intricate and tailored text wraps that fit the design needs of their projects.
Basic Setup
To demonstrate the shape-outside property, we will set up a simple HTML structure with an internal CSS stylesheet. This setup will help us visualize how different shapes affect the text wrapping around an image.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Shape Outside Example</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
.wrapper {
max-width: 800px;
margin: 0 auto;
}
.image {
float: left;
width: 200px;
height: 200px;
shape-outside: circle(50%);
clip-path: circle(50%);
margin-right: 20px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="wrapper">
<img src="https://example.com/path/to/your/image.jpg" alt="Example Image" class="image">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum. Cras venenatis euismod malesuada. Nullam ac erat ut lacus euismod efficitur. Donec venenatis orci vel elit facilisis, a interdum orci tempor. Etiam sit amet metus nec risus tempor fermentum. Phasellus at lectus fringilla, vestibulum lorem et, suscipit libero.</p>
<p>Quisque malesuada lacus ex, sit amet blandit leo lobortis eget. Nulla facilisi. Proin sit amet urna nec erat varius condimentum. Integer consectetur orci nec vestibulum tempus. In ac libero vitae arcu scelerisque placerat. Curabitur euismod libero nec quam tempor, id porttitor lacus gravida. Nam euismod, tortor in facilisis ullamcorper, odio urna venenatis neque, at semper lectus est eget urna.</p>
</div>
</body>
</html>In this setup, we have a simple layout with an image floated to the left. The shape-outside property is set to circle(50%), which defines a circular float area around the image. Additionally, the clip-path property is used to clip the image to match the defined shape, enhancing the visual effect.
Practical Examples of shape-outside
Let’s explore how different values of shape-outside affect the text wrapping around the image.
Example 1: Using the circle() Shape
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Shape Outside Example - Circle</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
.wrapper {
max-width: 800px;
margin: 0 auto;
}
.image {
float: left;
width: 200px;
height: 200px;
shape-outside: circle(50%);
clip-path: circle(50%);
margin-right: 20px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="wrapper">
<img src="https://example.com/path/to/your/image.jpg" alt="Example Image" class="image">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum. Cras venenatis euismod malesuada. Nullam ac erat ut lacus euismod efficitur. Donec venenatis orci vel elit facilisis, a interdum orci tempor. Etiam sit amet metus nec risus tempor fermentum. Phasellus at lectus fringilla, vestibulum lorem et, suscipit libero.</p>
<p>Quisque malesuada lacus ex, sit amet blandit leo lobortis eget. Nulla facilisi. Proin sit amet urna nec erat varius condimentum. Integer consectetur orci nec vestibulum tempus. In ac libero vitae arcu scelerisque placerat. Curabitur euismod libero nec quam tempor, id porttitor lacus gravida. Nam euismod, tortor in facilisis ullamcorper, odio urna venenatis neque, at semper lectus est eget urna.</p>
</div>
</body>
</html>In this example, the shape-outside property is set to circle(50%), creating a circular float area around the image. The text wraps smoothly around the circular shape, creating a visually appealing layout. The clip-path property is also set to circle(50%) to match the clipping area with the float shape, making the image itself appear circular.
Example 2: Using the ellipse() Shape
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Shape Outside Example - Ellipse</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
.wrapper {
max-width: 800px;
margin: 0 auto;
}
.image {
float: left;
width: 200px;
height: 200px;
shape-outside: ellipse(50% 25%);
clip-path: ellipse(50% 25%);
margin-right: 20px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="wrapper">
<img src="https://example.com/path/to/your/image.jpg" alt="Example Image" class="image">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum. Cras venenatis euismod malesuada. Nullam ac erat ut lacus euismod efficitur. Donec venenatis orci vel elit facilisis, a interdum orci tempor. Etiam sit amet metus nec risus tempor fermentum. Phasellus at lectus fringilla, vestibulum lorem et, suscipit libero.</p>
<p>Quisque malesuada lacus ex, sit amet blandit leo lobortis eget. Nulla facilisi. Proin sit amet urna nec erat varius condimentum. Integer consectetur orci nec vestibulum tempus. In ac libero vitae arcu scelerisque placerat. Curabitur euismod libero nec quam tempor, id porttitor lacus gravida. Nam euismod, tortor in facilisis ullamcorper, odio urna venenatis neque, at semper lectus est eget urna.</p>
</div>
</body>
</html>In this example, the shape-outside property is set to ellipse(50% 25%), defining an elliptical float area around the image. The text wraps around the ellipse shape, giving a unique and attractive look. Similar to the previous example, the clip-path property is used to clip the image to match the ellipse shape.
Combining shape-outside with Other CSS Properties
To create more refined layouts, the shape-outside property can be combined with other CSS properties like shape-margin and shape-image-threshold. Let’s see an example where we combine these properties.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Shape Outside Example - Combined Properties</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
.wrapper {
max-width: 800px;
margin: 0 auto;
}
.image {
float: left;
width: 200px;
height: 200px;
shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
shape-margin: 10px;
margin-right: 20px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="wrapper">
<img src="https://example.com/path/to/your/image.jpg" alt="Example Image" class="image">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum. Cras venenatis euismod malesuada. Nullam ac erat ut lacus euismod efficitur. Donec venenatis orci vel elit facilisis, a interdum orci tempor. Etiam sit amet metus nec risus tempor fermentum. Phasellus at lectus fringilla, vestibulum lorem et, suscipit libero.</p>
<p>Quisque malesuada lacus ex, sit amet blandit leo lobortis eget. Nulla facilisi. Proin sit amet urna nec erat varius condimentum. Integer consectetur orci nec vestibulum tempus. In ac libero vitae arcu scelerisque placerat. Curabitur euismod libero nec quam tempor, id porttitor lacus gravida. Nam euismod, tortor in facilisis ullamcorper, odio urna venenatis neque, at semper lectus est eget urna.</p>
</div>
</body>
</html>In this example, the shape-outside property is set to a polygon() value, creating a rectangular float area with additional margins using the shape-margin property. This combination allows for precise control over the float area and the spacing around it, enhancing the text wrapping and overall layout.
Conclusion
The shape-outside property in CSS offers powerful capabilities for creating complex and visually appealing text wraps around various shapes. By defining float areas with different shapes, developers can enhance the design and user experience of their web pages. Whether using basic shapes like circles and ellipses or custom shapes defined by polygons, the shape-outside property allows for intricate and tailored layouts.
In this article, we explored the shape-outside property, understood its values, and demonstrated practical examples of its application. By combining shape-outside with other CSS properties, such as shape-margin, developers can achieve refined and aesthetically pleasing designs. Embrace the potential of shape-outside to create more engaging and dynamic web layouts.
