The modern web is visually appealing and dynamic, and thanks to the latest CSS additions, we can now design layouts that break with tradition and offer impressive user experiences. One of the most exciting properties for creative designers in the CSS realm is shape-outside, which allows us to define shapes around which text content can flow, breaking with the traditional rectangle of HTML boxes and giving way to creative freedom. In this article, we will explore how to use masks and cutouts with shape-outside to achieve advanced visual effects on the web.
Introduction to Shape Outside
What is Shape Outside?
shape-outside is a CSS property that allows the flow of content to surround a defined shape, rather than conforming to the straight lines of a block of elements. It is a tool that opens a world of possibilities for graphic design within browsers, since you can create wrappers around circles, ellipses, polygons or even images.
Shape Outside Applications
The use of shape-outside can be particularly useful for:
- Magazine layouts
- Creative portfolios
- Websites with a strong focus on brand image
- Blogs with a visually rich design
How to Implement Shape Outside in CSS
Configure the HTML Environment
To apply shape-outside, we need a basic HTML structure, which usually consists of a container and an element that we want to wrap with text.
<div class="container">
<div class="shape"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>Apply Shape Outside with CSS
The next step is to style our elements with CSS. It is crucial that the element to which we apply shape-outside have a float defined to be able to see the effect of the shape.
.shape { float: left; width: 200px; height: 200px; shape-outside: circle(50%); }In this example, the text will flow around a circle, but shape-outside also accepts other forms.
Basic Shapes with Shape Outside
Circle
To define a circle, we can use the function circle(). The syntax is simple: circle(radius at xy) where radius defines the radius of the circle and xy the position of the center.
Ellipse
The ellipse is defined with ellipse(). The syntax could be: ellipse(rx ry at xy), where rx is the x,y radius ry is the radius y.
Polygons
The polygon is perhaps the most versatile shape. You can use polygon() to create almost any shape. The syntax is polygon(x1 y1, x2 y2, ...) where each pair of x and y is a vertex of the polygon.
Images
Using an image as a shape is possible with url(), followed by the image path. CSS will clip the outline of the image and use it for the flow of the content.
Advanced Techniques and Practical Examples
Images as External Forms
We can use a PNG image with transparencies as our mask. When using shape-outside with url(), the transparent area will define how the content will flow around the image. It is important to keep in mind that it must be accompanied by shape-image-threshold to adjust the precision of the contour.
Gradients
Although not the most common use, a gradient can also be used in conjunction with shape-image-threshold. The idea is that the browser will consider the lighter or darker areas of the gradient as boundaries for the flow of the text.
Clipping Paths
Although clip-path is a different property, it is important to mention it since it is closely related to shape-outside. clip-path defines a visible area for an element, clipping it to a specific shape, similar to shape-outside, but applied to the element itself, not to the flow of content around it.
Code Examples
Here is an example of how to use shape-outside with an image:
.shape { float: left; width: 200px; height: 200px; background: url('path-to-image.png'); shape-outside: url('path-to-image.png'); shape-image-threshold: 0.5; }This code will make the text flow around the shape of the provided PNG image.
Best Practices and Considerations
Browser Support
shape-outside is relatively new to CSS, and although it has been widely adopted, there are still browsers that do not fully support it. It is always important to check compatibility and consider alternatives for older browsers.
Accessibility
Although creative shapes can make a design more attractive, we should not sacrifice accessibility. Ensuring adequate contrast and readability is essential for all users.
Performance
Complex shapes can have an impact on performance, especially if you use images to define the exterior shape. Optimizing these images and evaluating the cost of rendering is essential to maintaining a fast website.
Conclusion
With shape-outside, CSS gives us the brush to paint outside the lines and create web designs that are true works of art. Used with knowledge and care, it can transform interfaces and take the user experience to a new level. As we've seen, it's a powerful property and, although it may not yet be universally supported, the future for creativity on the web looks very promising.
By experimenting with shape-outside and other properties related to skins and clippings, we can explore new horizons of web design and provide users with unique and memorable interfaces. It's time to unleash our creativity with CSS!
English 
Spanish