The web doesn’t have to be boxy. Historically, every element in a page is rendered as a rectangle of some kind, but it doesn’t have to be this way. With CSS Shapes you can create web layouts every bit as stylish as print magazines, but with all of the advantages of the web.
CSS Shapes let your web designs break out of the rectangular grid. All of those classic magazine design elements like non-rectangular text flow and shaped images can be yours, for the low low price of using a new CSS standard. Text can flow, images can be rounded, even just a few non-parallel lines can make your site stand out and make your brand distinctive. Standing out is the biggest challenge most sites face today. Shapes can help!
The shape of your elements can be controlled with just two CSS properties:
shape-outside property changes the way content flows outside of a floated DOM element. It affects layout, not drawing. The
clip-path property changes the clipping boundary of how the DOM element is drawn. It affects drawing, not layout.
Because these two properties are separate, you can use one, or both, or none — to get just exactly the effect you are looking for. The good news is that both of these use the same
Want to clip your image to be in a circle? Just use
clip-path: circle(50%). Want to make text wrap around your image as if it were a circle, just use
shape-outside: circle(50%). The shape syntax supports rectangles, circles, ellipses, and full polygons. Of course, manually positioning polygons with numbers is slow and painful. Fortunately there is a better way.
The Shape Path Editor
With the Shape Path Editor in Firefox 62, you can visually edit the shape directly from the CSS inspector. Open your page in Firefox, and use Firefox Developer Tools to select the element whose shape you want to modify. Once you select the element there will be a little icon next to the
clip-path properties if you have used one of them. If not, add
clip-path to that element first. Click on that little icon to start the visual editor. Then you can directly manipulate the shape with your mouse.
Open the Inspector and select the element you want to modify:
Click the icon next to
shape-outside. If the element doesn’t have one of these properties, add it, then select it.
Edit the clip path:
Edit the outside shape:
Check out this live demo on glitch.
To learn more about how to use the CSS Shape Editor read the full documentation.
CSS shapes are here and they work today in most browsers, and most importantly they degrade gracefully. Readers with current browsers will get a beautiful experience and readers with non-compliant browsers will never know they are missing anything.
Here are just a few examples of the amazing layouts you can do with CSS Shapes:
Page layout text effects with
Plants and background effect using
Break out of the Box
Shapes on the web are here today, thanks to
clip-path. Using the Firefox Shape Path Editor makes them even easier to use.
How will you make your website break out of the box? Let us know how you’re using Shapes.
About Josh Marinacci
I am an author, researcher, and recovering engineer. Formerly on the Swing Team at Sun, the webOS team at Palm, and Nokia Research. I spread the word of good user experiences. I live in sunny Eugene Oregon with my wife and genius Lego builder child.