Blog

CSS Shapes Editor Extension

The CSS Shapes Editor extension for Brackets allows you to edit CSS Shapes values in Live Preview mode. A visual editor is stacked on top of the focused element so you can drag points and handles to change the element’s shape. This makes it very easy to see the shape changes in context. The extension is compatible with Brackets release 38 and above.



Click to view the Polygon Shapes example

What are CSS Shapes?

CSS Shapes represent a new feature, which allows web designers to wrap content inside and around custom paths. This feature opens up a lot of creative layout options because it lets designers break free from creating within the constraints of the block — the current rectangular shape of almost everything on the web.

Work on CSS Shapes is still in progress, but you can enable the feature today in Google Chrome.

Why edit CSS Shapes in the browser?

CSS Shapes are meant to be used in the browser. It makes little sense to use a classic design authoring tool to create them, then export them to CSS, then import them in a code editor, refresh the page in the browser, inspect, sigh, rinse and repeat. Any tweaks become too painful to do.

Authoring CSS Shapes in an external editor makes the workflow too difficult. It’s not easy to see how the shape interacts with the content on the web page, so there’s a lot of back-and-forth.

Installing the CSS Shapes Editor extension for Brackets

In Brackets, open File > Extension Manager and search for “CSS Shapes Editor” to find the extension, then click Install.

Or, if you want to run the bleeding-edge version, you may install from source. To do so, open File > Extension Manager and click “Install from URL”, then use the extension’s GitHub repository URL: https://github.com/adobe-webplatform/brackets-css-shapes-editor/

The bleeding-edge version may be more advanced, but also more error-prone than the stable version you will find searching through the Brackets extension registry as described in the first step.

Turning on support for CSS Shapes in Brackets

CSS Shapes are still under development in Google Chrome. You need to manually enable the feature before you can use the visual editor for shapes.

First, ensure that you have Google Chrome version 34 or above. Check this in Chrome’s settings menu under “About Google Chrome”. You also need to make sure that support for CSS Shapes is turned on in the Chrome instance that Brackets uses for the LivePreview mode.

Here’s what you need to do: open any HTML file in Brackets and launch LivePreview, then follow the instructions to enable CSS Shapes in that browser window. You only need to do this once.

This step is important!

Brackets uses a Chrome instance separate from the main one on your computer. This means that settings will not be inherited from your main Chrome browser, if that is your day-to-day browser. Even if you have already enabled CSS Shapes in your main browser, you still need to do it again in Brackets’s Chrome instance for LivePreview.

Using the CSS Shapes Editor

The CSS Shapes Editor in Brackets turns on automatically when you need it. While editing a CSS shape property, such as `shape-inside` or `shape-outside`, simply focus the cursor on the property value, like `polygon(…)` or `circle(…)`, then turn on the Live Preview mode. A visual editor with draggable points and handles appears on top of the element that is being edited. If no editor appears, make sure that CSS Shapes are enabled in Google Chrome.


Click to view the Circular Shapes example

The in-browser editor is specialized for the shape type. Polygons get an editor where you can drag the points for the polygon vertices to change the shape. Click on the polygon outline to add new points, or double click an existing point to remove it. While editing a polygon, press the T key on your keyboard to toggle controls that scale, move and rotate the polygon shape. Circles, ellipses and rectangles get an overlay of the shape, which can be scaled and moved around.

Any changes to the shape are instantly visible in the context of the page. All actions in the shape editor reflect back to the code editor. When you are done, just turn off the Live Preview mode.

CSS Shapes can be defined with all sorts of CSS units, such as pixels, ems, rems and even percentages for responsive shapes. The CSS Shapes Editor takes care to preserve the unit type for the shape while editing.

What will you build?

Authoring CSS Shapes in the context of the browser is just one way we are making it easier to explore new web platform features. While CSS Shapes are still in development, this editor in Brackets helps you learn about the feature today, experiment, and get ready to use shapes when they will be switched on by default.

If you need a head start, Sara Soueidan has written a great introduction to working with CSS Shapes where she describes in detail how to use the new properties.

We’re eager to see what ideas you bring to life with CSS Shapes now that there is a practical way to create, edit and tweak the shape of content on the web.

Cheers to a less rectangular web!

23 Responses


9 Comments

  1. […] 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 […]

  2. This is an Amazing extension I Love it so much this will make, making websites for my clients so much easier it is crazy. I can imagine that there will be some awesome designs from this tool.

  3. […] positive this is the right place but Brackets has a cool new feature. CSS Shapes. CSS Shapes Editor Extension – Brackets Blog __________________ I'm a […]

  4. This is really nice! 🙂

    • David says:

      Hey Andres –

      Mine shows blank in chrome. Here is the code I am trying to use.

      CSS Shapes

      .shape {
      width: 600px;
      height: 300px;
      float: left;
      shape-outside: polygon(nonzero, 158px 101px 300px );
      }

      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, esse architecto molestiae laboriosam neque porro cupiditate nam natus! Soluta, rem, doloremque dolorem atque quod quidem quae illo enim quaerat officia.
      Officiis, reiciendis dolor dolores magnam ipsum veniam adipisci voluptate. Obcaecati, at qui cupiditate illo explicabo commodi officiis sunt velit hic exercitationem aut facere alias a quisquam quasi nesciunt ad molestiae!

  5. Robin says:

    Amazing extension.

  6. themaker says:

    it doesn’t work :/

  7. David says:

    I have done everything, but do not see the editor.

  8. Bryan Chin says:

    For those of you having difficulty getting the extension to work, please be sure to check out the instructions. In particular, please note that this extension currently requires that you enable an experimental flag in the Chrome 34 instance that you launch from Live Preview. Hope this helps!

  9. […] because it facilitates creating, editing, and debugging our shapes. Razvan Caliman has written an article on the Brackets blog explaining how you can get the Shapes editor in Brackets and start using it […]

  10. […] I think Calder posted this the other day actually: CSS Shapes Editor Extension – Brackets Blog […]

  11. […] ?????????????????Dreamweaver???“?????”????????????????????????????????Brackets/Adobe Edge Code?????Live Preview????????Chrome?????????????????????????????????????????????CSS Shapes Editor Extension????????? […]

  12. kristofer says:

    Verty nice! Only one problem with this http://caniuse.com/#search=css%20shapes

  13. […] ????????????????????????????? Razvan Caliman?Brackets?????????????????Brackets???Shape???? […]

  14. […] browser, and gives you instant visual feedback for your changes. Head over to the Adobe blog for an article explaining how you can get the Shapes editor and start using it […]

  15. […] because it facilitates creating, editing, and debugging our shapes. Razvan Caliman has written an article on the Brackets blog explaining how you can get the Shapes editor in Brackets and start using it […]

  16. James Collier says:

    Can’t get it working. I assumed it would work in Chrome 35, am I mistaken?

  17. […] because it facilitates creating, editing, and debugging our shapes. Razvan Caliman has written an article on the Brackets blog explaining how you can get the Shapes editor in Brackets and start using it […]

  18. […] browser, and gives you instant visual feedback for your changes. Head over to the Adobe blog for an article explaining how you can get the Shapes editor and start using it […]

  19. […] ????????, ?????????????? ? ????????? ?????. Razvan Caliman ??????? ?????? ? ????? Bracktes, ??????? ????????? ??? ??????? ???????? ????? ? Brackets ? […]

  20. […] ????????????? ?????????. ??? ????? ???? ?????????? CSS Shapes Editor ??????? ???????? ????????? ????? […]

  21. […] CSS Shapes Editor for Chrome menggunakan dasar interaksi dari library shape editor yang juga digunakan oleh CSS Shape Editor untuk ekstensi Brackets […]

  22. […] The CSS Shapes Editor extension for Brackets uses the code editor’s live preview mode to overlay an interactive editor for editing shape […]

14 Trackbacks


    Warning: call_user_func() expects parameter 1 to be a valid callback, function 'thematic_pings' not found or invalid function name in /home/wp_twqxv4/blog.brackets.io/wp-includes/class-walker-comment.php on line 180

    Warning: call_user_func() expects parameter 1 to be a valid callback, function 'thematic_pings' not found or invalid function name in /home/wp_twqxv4/blog.brackets.io/wp-includes/class-walker-comment.php on line 180

    Warning: call_user_func() expects parameter 1 to be a valid callback, function 'thematic_pings' not found or invalid function name in /home/wp_twqxv4/blog.brackets.io/wp-includes/class-walker-comment.php on line 180

    Warning: call_user_func() expects parameter 1 to be a valid callback, function 'thematic_pings' not found or invalid function name in /home/wp_twqxv4/blog.brackets.io/wp-includes/class-walker-comment.php on line 180

    Warning: call_user_func() expects parameter 1 to be a valid callback, function 'thematic_pings' not found or invalid function name in /home/wp_twqxv4/blog.brackets.io/wp-includes/class-walker-comment.php on line 180

    Warning: call_user_func() expects parameter 1 to be a valid callback, function 'thematic_pings' not found or invalid function name in /home/wp_twqxv4/blog.brackets.io/wp-includes/class-walker-comment.php on line 180

    Warning: call_user_func() expects parameter 1 to be a valid callback, function 'thematic_pings' not found or invalid function name in /home/wp_twqxv4/blog.brackets.io/wp-includes/class-walker-comment.php on line 180

    Warning: call_user_func() expects parameter 1 to be a valid callback, function 'thematic_pings' not found or invalid function name in /home/wp_twqxv4/blog.brackets.io/wp-includes/class-walker-comment.php on line 180

    Warning: call_user_func() expects parameter 1 to be a valid callback, function 'thematic_pings' not found or invalid function name in /home/wp_twqxv4/blog.brackets.io/wp-includes/class-walker-comment.php on line 180

    Warning: call_user_func() expects parameter 1 to be a valid callback, function 'thematic_pings' not found or invalid function name in /home/wp_twqxv4/blog.brackets.io/wp-includes/class-walker-comment.php on line 180

    Warning: call_user_func() expects parameter 1 to be a valid callback, function 'thematic_pings' not found or invalid function name in /home/wp_twqxv4/blog.brackets.io/wp-includes/class-walker-comment.php on line 180

    Warning: call_user_func() expects parameter 1 to be a valid callback, function 'thematic_pings' not found or invalid function name in /home/wp_twqxv4/blog.brackets.io/wp-includes/class-walker-comment.php on line 180

    Warning: call_user_func() expects parameter 1 to be a valid callback, function 'thematic_pings' not found or invalid function name in /home/wp_twqxv4/blog.brackets.io/wp-includes/class-walker-comment.php on line 180

    Warning: call_user_func() expects parameter 1 to be a valid callback, function 'thematic_pings' not found or invalid function name in /home/wp_twqxv4/blog.brackets.io/wp-includes/class-walker-comment.php on line 180

Post a Comment

Your email is never published nor shared. Required fields are marked *

You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*
*


3 + six =