Adobe

decor

Web Platform Team Blog

Making the web awesome

CSS Shapes Editor for Brackets

CSS Shapes open a lot of design possibilities with the ability to wrap content inside and around custom paths.

However, creating the actual shapes used to be a cumbersome process. You’d use an image authoring tool to create paths, export them, maybe adjust them to conform to CSS shapes syntax, import them into your stylesheet, then check in the browser to see how the result interacts with content on the page. Even minor adjustments become too painful to do with this workflow. A better approach was needed.

CSS Shapes are meant to be used in the browser. Why not create them there?

shapes-polygon

Today, we are announcing the release of the CSS Shapes Editor extension for Brackets. It is a tool which you use to edit, scale and transform CSS Shapes values right in the browser when using the LivePreview mode in Brackets. Authoring shapes this way gives you instant visual feedback for your changes, so you get to see how the shapes interact with other elements on the page.

Head over to the Brackets blog to find out how to get the CSS Shapes Editor extension.

We are also making it easy for web developers inspect CSS Shapes with the Webkit WebInspector. You can see the shape outline by hovering your mouse over the element which uses it.

webinspector-shapes

3 Comments

  1. April 18, 2014 at 11:56 am, Olivier de Broqueville said:

    In the first animated image above, I noticed that the text doesn’t flow to the left of the triangle or polygon shape delimited by the dotted line. Why is that?

    • April 19, 2014 at 12:23 pm, Razvan Caliman said:

      Olivier, the shape-outside property affects the float area of the element. According to the spec, content can’t flow on both sides of a floated element. An upcoming spec, called CSS Exclusions, will define how content can do that. Then, the content may be able to wrap on both sides of a triangle.

  2. April 19, 2014 at 8:52 am, Daniel Maza said:

    Excelente.