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