Make your web layouts bust out of the rectangle with the Firefox Shape Path Editor

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!

Save The Trees mockup with leaf-shaped icon, and flowed lorem ipsum text

Image by Sara Soueidan

The Standard

The shape of your elements can be controlled with just two CSS properties: shape-outside and clip-path.

The 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.

clipping the image of a kitten into a circular shape

The clip-path and shape-outside properties.

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 basic-shape syntax.

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 shape-outside and clip-path properties if you have used one of them. If not, add shape-outside and 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.

Using the shape editor in Firefox Dev Tools

Image courtesy of placekitten, text courtesy of catipsum.

Open the Inspector and select the element you want to modify:

using the inspector to modify a kitten photo

Click the icon next to clip-path or shape-outside. If the element doesn’t have one of these properties, add it, then select it.

modifying the image element with the shape editor

Edit the clip path:

editing the clip path

Edit the outside shape:

editing 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.

Progressive Enhancement

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.

kitten with shape supportkitten image without shape support degrades progressively

Stunning Examples

Here are just a few examples of the amazing layouts you can do with CSS Shapes:

Page layout text effects with clip-path:

Codepen by Mandy Michael called "Create"

via Mandy Michael

Plants and background effect using clip-path:

Minion using shape-outside:

Break out of the Box

Shapes on the web are here today, thanks to shape-outside and 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.

More articles by Josh Marinacci…


2 comments

  1. Serator

    Hi! Is it planned to support `clip-path: path()` in the foreseeable future?

    September 6th, 2018 at 01:18

    Reply

    1. Josh Marinacci

      I don’t think path is in the basic shape spec, but when it is I’m sure we will support it.

      September 7th, 2018 at 12:10

      Reply

Post Your Comment