Easy Ways to Use CSS Shapes | The Future of Web Layout

The presence of CSS Shapes as a new feature of CSS3 is certainly welcomed by web designers around the world. This is because CSS shapes are considered one of the future of web layouts.

With CSS Shapes we can create website layouts such as magazines and arrange the content at will. CSS Shapes allows us to wrap content according to the specified path, we can create text that follows the shape of an existing image object.

However, to apply CSS Shapes on web pages today is not easy, it is still very difficult to make, too much code to type, and this is of course still confusing and time consuming if we really want to implement it. So far there are no really easy tools to create CSS shapes.

The difficulty of web designers to create layouts using CSS Shapes attracted the attention of a web developer named Razvan Caliman to create a CSS Shapes Editor for Chrome. This is a Developer Tools extension that provides an interactive editor for specifying property values ​​for shapes, such as circle(), ellipse(), and polygon().

We can see in the video above how easy it is to set the path. The interactive editor is placed above the selected element. This tool adds controls to adjust, move, scale and rotate shapes. Visually we can see the code is directly generated and the layout form is formed. This is fantastic, it makes working with CSS Shapes even easier, CSS Shapes is even more fun because it’s easier to experiment with the shapes you want right in the browser.

Example Layout with CSS Shapes

The example that tutorial-webdesign.com made can be seen here, and can also be downloaded via github, to open it, you are expected to use the latest google chrome.

How to use.
To bring up the CSS Shapes Editor you need to install the extensions CSS Shapes Editor for Chrome from the Chrome Web Store.

How to use it is quite easy, open your google chrome, then open the developer tool which can be accessed via the View menu -> Developer -> Developer Tools
If the developer tool has appeared you can open a new tab called shapes.

To start, you can select one of the objects in the website layout, then click the plus (+) icon in the shape tab, choose whether you want to make a circle, ellipse or polygon shape.

You can see the pictures below if you are still confused about using it.

How to create an object with a polygon shape

For polygons, click on the edge of the interactive editor to add a new vertex, drag a point to adjust the shape or double-click an existing point to delete it.

css shape polygon

To switch to transform mode, click the “move” icon on the interactive editor toolbar, then move, scale and rotate the polygon shape.

All types of CSS units can be used with CSS Shapes. By default, the CSS Shapes Editor uses pixels, but understands other units as well. It is sometimes useful to change the unit type of shape coordinates, for example to make them responsive. You can hold down the SHIFT key and press the “pointer” icon.

css shape transform

Circles and Ellipses can only transform to scale and move, but can’t rotate

css shape convert

This clips-path CSS masking uses the same syntax as CSS Shapes, making it possible to reuse the CSS Shapes Editor. That’s why the clip-path calculated value is also available in the sidebar.

css shapes clip

Extensions CSS Shapes Editor for Chrome is built using the basic interaction of the shape editor library which is also used by the CSS Shape Editor for the Brackets extension.

Other sources:

CSS Shapes 101
Using CSS Shapes to Enhance Visual Storytelling
CSS Shapes
CSS Shapes Editor for Chrome
Hopefully this information can inspire those of you who are in the world of CSS3 web design