Shapes as Layout Drivers
CSS Shapes have been around for a long time and allow developers to wrap text around the shape of the image.
According to MDN:
The CSS shapes module describes geometric shapes that can be in CSS. For the Level 1 specification, CSS shapes can be applied to floating elements. The specification defines a number of different ways to define a shape on a floated element, causing wrapping lines to wrap round the shape rather than following the rectangle of the element's box.
Basic Examples #
The most basic example uses an image to create the shape that the text flows around and shape-outside() to create the shape.
You're not limited to shapes as defined in the specification. You can use images to define the shape that the text will flow around.
The caveat is that the images must not have a background otherwise, the shape will be that of the background, usually a square or a rectangle.
Another important detail is that the images must be floated left or right for shapes to work properly.
Using More Than One Floated Images #
You can float images on both sides to create different layouts. In this case, we've used the same circle from the first example, one floated to the left and the other one to the right.
We can also use the bee image from example #2 on this post notice how the two shapes are different and based on the legs of the bee.
A few examples we haven't looked at are:
- Using different images on each side of the text
- Using multiple images throughout the page to create even more complex layouts.
Refining The Shapes #
Using shape-outside gives us the shape to flow content around but there are a few things that we can add to make it better.
shape-margin controls the distance between the image and the text.
With this property, we control the distance between the shape and the text wrapped around it.
The shape-image-threshold CSS property sets the alpha channel threshold used to extract the shape using an image as the value for shape-outside.
Any pixels whose alpha component's value is greater than the threshold are considered to be part of the shape for determining its boundaries. For example, a value of 0.2 or .2 means that the shape will enclose all the pixels that are more than 20% opaque.
Defining Shapes Without Images #
So far, all the examples we've covered use images to create the shapes. There is a way to create the shapes without using an image.
See the full-page pen or the embedded pen below.
As we did with images, we can use multiple elements floated left and right to create non-box layouts for our texts.
We can use any of the shapes included in the basic shapes specified in the CSS Shapes Level 1 specification.
Further Ideas #
Another way to look at shapes is how to combine them with layouts that don't include flows of text.
CSS Grid and Custom Shapes Part 1, Part 2, and Part 3 show some creative uses of shapes, grids and related technologies.