Web designers have long been forced to create within the constraints of the block. Since the majority of daring ventures into non-rectangular layout using CSS and HTML end in frustration, most content on the web is still trapped in simple boxes.
Creative uses of border-radius and CSS transform properties only create the illusion of shapes and don't actually affect the content layout as expected. A circle carved with border-radius is still a rectangle in disguise. All this is about to change with the implementation of CSS Shapes.
CSS Shapes allows web designers to wrap content inside and around custom shapes. Shapes are defined in simple, practical and reusable ways, and, unlike most CSS hacks that just simulate shapes, can affect the entire layout of a web page.
Perhaps you've been as naive as me when first floating an image with some transparent parts expecting content to wrap neatly around it, filling the blanks. Instead, we saw it wrap around the image block. How disappointing! We can solve this problem using CSS Shapes.
Here's a simple circle shape example:
.foo { shape-outside: circle(200px at 50% 50%); float: left; }
The shape-outside property here creates a circle with a radius of 200px starting from the centre of the element. Use of the float property causes the content outside of the element to wrap around the circle shape. Note that this only affects the layout of content, not the clipping of the element itself to a circle; the clip-path property should be used for that and you can reuse the same property value. Content can also be wrapped inside of a custom shape by using the shape-inside property:
.bar { shape-inside: circle(50%, 50%, 200px); }
Explicit width and height must be set when using shape-* properties. For brevity, dimensions have been omitted from these examples.
Shape property values can be defined with built-in shape functions such as circle(), ellipse() and polygon(), or they can be derived from images which have an alpha channel by using url(path-to-image.png). All types of CSS units can be used within shape definitions. This means that shapes can also be responsive. Regular margin and padding don't make sense with shapes, especially when thinking about polygons. What is a margin-top for a triangle anyway? Two new properties, shape-margin and shape-padding, are used to achieve the desired effect.
CSS Shapes lend themselves to a progressive enhancement development approach. When not supported, browsers will ignore the shape properties and fallback to plain blocks, thus keeping content visible. However, as with all new features, due diligence is necessary to make sure content is accessible for all users.
The CSS Shapes specification and implementation are still in flux with changes likely to come. Because of this, the feature is behind a flag in Google Chrome. Adobe is working on the implementation of CSS Shapes and keeps track of browser support and how to enable the feature here.
Words: Razvan Caliman
Razvan Caliman is an engineer on the web platform team at Adobe. He experiments with cutting-edge web technologies and builds things to make life easier for web developers. This article originally appeared in net magazine issue 252.
