Moving Forward with CSS Shapes

If you liked my CSS Shapes 101 article last week and are as excited about CSS Shapes as I am, then you may find a list of resources to dig deeper into CSS Shapes useful. In this post, I’m going to share with you some resources that can help you dig deeper into CSS Shapes that I’ve compiled (and written) over the time I’ve been working with Shapes.

Articles and tutorials

I’ve experimented with CSS Shapes quite a lot, and I’ve written a few articles that I believe you will find useful. Each article deals with a different aspect of CSS Shapes:

• “Creating Non-Rectangular Layouts with CSS Shapes”
  In this article I go over the basics of CSS Shapes—what you need to create a shape, how to apply it, some gotchas and prerequisites, and lots of examples with detailed explanations and screenshots of each demo.
• “Animating CSS Shapes with CSS Animations and Transitions”
  As the title says, this article deals with the animatable aspect of CSS Shapes—how to animate them, some examples (live demos), and accessibility considerations to keep in mind when deciding to animate your shaped layouts.
• “Using CSS Regions With CSS Shapes For A Better Reading Experience”
  CSS Shapes work really well with CSS Regions, and this article explains how CSS Regions can be used with (the future level of) CSS Shapes to create more readable Shapes layouts. You’ll learn how using multiple shapes to flow text into may result in a bad reading experience, and how you can solve that using CSS Regions. If you’re worried about CSS Regions support being dropped from Blink, you can always use this great Regions polyfill by the Adobe Web Platform team, which provides fallback for non-supporting browsers.

The web platform team at Adobe has written quite a few articles about CSS Shapes. You should check out the CSS Shapes articles published on the Adobe blog for examples, explanations, and of course, CSS Shapes updates.

Last but not least, the CSS Shapes specification, which has reached Candidate Recommendation status, is always a good source of information too.

Open source code

What better way to learn code than to dig into it?

One fantastic CSS Shapes demo is the Alice In Wonderland demo created by Adobe’s Razvan Caliman. The demo shows how CSS Shapes can be used to enhance visual storytelling. This is definitely one demo you don’t want to miss if you want to learn more about CSS Shapes. Razvan has also written an article about the demo and an overview of the techniques used to create it.

Also, all the demos from my articles mentioned above are open-sourced. You can find them in my Github profile.

Tools

The best CSS Shapes interactive authoring tool is the Shapes Editor recently released by Adobe as an extension for their Brackets editor. It allows you to visualize and edit shapes directly in the 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 today.

If downloading Brackets is too much of a hassle for you because you just want to create a simple polygonal shape, for example, you can use Bear Travis’s collection of Shapes Tools that can generate a polygonal shape for you. You can also use this tool by CSSPlant which isn’t exactly a CSS Shapes tool, but does what is needed to generate a polygonal shape from an interactive visual editor.

Final words

Hopefully these resources can set you on the right track to start experimenting with CSS Shapes today. As I mentioned in my 101 article, Shapes fall back pretty well in non-supporting browsers, so there’s no reason why you can’t start using them today as an enhancement to your designs.

Happy experimenting!