Reshaping the web with CSS shapes & exclusions

Today’s web is built of rectangles, we can try and cheat it by creating other shapes in the browser, but the basic foundation is rectangles.

That poses a problem for anyone trying to produce a more organic layout with, for example, text wrapping around a curve; or even limited within a circle.

The solution to this is CSS shapes and exclusions, which allow us to create true polygons, circles and ellipses. For now this feature is only available in Chrome Canary, or by enabling experimental WebKit features; but in the very near future, it will change the way we design the web forever.

Using shape-inside

The shape-inside property lets us define the bounds of an element. We can use it to apply polygons, circles or ellipses. If, for example, we wanted to restrict a paragraph of text to a circle we’d use this code:

p.circle
{
    height:300px;
    width:300px;
    shape-inside: circle(50%, 50%, 50%);
}

There are five different values we can use for shape-inside:

/* Rectangle with 5px border radius */
shape-inside: rectangle(0, 0, 300px, 300px, 5px, 5px);

Defines a rectangle with an origin and a size. The last two parameters are optional and for specifying rounded corners.

/* An inset rectangle that is 20px smaller than the content box */
shape-inside: inset-rectangle(10px,10px,10px,10px);

Defines a rectangle by specifying its distance from the top, right, bottom and left of the bounding box. As with the rectangle you can specify rounded corners using the final two parameters if you wish.

/* A simple circle */
shape-inside: circle(0, 0, 50%);

These simple settings define a circle, with x and y followed by radius.

/* A simple ellipse that is taller */
shape-inside: ellipse(0, 0, 20%, 50%);

This code is identical to the circle except that it allows you to specify first a x radius and then a y radius.

/* A polygon in the shape of a triangle */
shape-inside: polygon(74.33px 316.47px,321.67px 315.47px,190.67px 86.53px);

This code creates a polygon, the most complex of the shapes. You simply specify a series of x and y values. To create this visually you can use this small drawing application.

One more thing we can take advantage of with shape-inside is shape-padding. This adds a little whitespace for breathing room:

p.circle {
height: 300px;
width: 300px;
shape-inside: circle(50%, 50%, 50%);
shape-padding: 10px;
}

Using shape-outside

As you might be able to guess, shape-outside defines a shape around which the text should wrap. For now this only works with floated elements.

We’re able to use exactly the same elements as listed above for shape-inside.

For example we can create a div, shaped like a circle, around which we’ll float other elements:

div.outside{
   width: 100px;
   height: 100px;
   float: left;
   shape-outside:circle(50%,50%,50%);
}

As well as specifying shapes, we can also specify a transparent png and use its alpha channel to compute the shape. The path is created by the area in which the pixels are greater than the shape-image-threshold value, so if we used 0.2 as the value, the shape would be formed by the parts of the image that are at least 20% opaque:

img.outside{
   float: left;
   shape-outside: attr(//image URL);
   shape-image-threshold: 0.2;
}

Just like shape-inside, we can use shape-margin with shape-outside:

div.outside{
   width: 100px;
   height: 100px;
   float: left;
   shape-outside:circle(50%,50%,50%);
   shape-margin: 10px;
}

Conclusion

If you would like to see this in action you can see this very simple pen that demonstrates the principles of CSS shapes.

This new CSS feature isn’t very useful yet, but it’s good to know what’s on the horizon and once this is fully implemented by browser manufacturers it will deliver unprecedented flexibility.

What uses can you think of for CSS Shapes? How do you think they’ll affect web design? Let us know in the comments.