Stuff & Nonsense product and website design

Blog and all that malarkey

Art Direction For The Web Using CSS Shapes: Article on Smashing Magazine

Last year, Rachel Andrew wrote an article that took a new look at CSS Shapes in which she reintroduced readers to the basics of using CSS Shapes. In a new tutorial for Smashing Magazine, I expand on the topic of Art Direction for the Web with CSS Shapes to create exciting and inspired new design ideas.

For anyone keen to understand how to use properties like shape-outside, shape-margin, and shape-image-threshold, Rachel’s is the ideal primer. I’ve seen many examples of using the properties, but very few go beyond Basic Shapes, including circle(), ellipse(), inset(). Even examples using polygon() shapes rarely go far beyond them. Considering the creative opportunities CSS Shapes offer, this is disappointing. But, I’m sure that with a little inspiration and imagination, we can make more distinctive and engaging designs. So in this article, I show you how to use CSS Shapes to create five different types of layout. They are:

  1. V-shapes
  2. Z-patterns
  3. Curves
  4. Diagonals
  5. Rotated shapes
Art Direction for the Web with CSS Shapes
Art Direction for the Web with CSS Shapes. Download the examples.

I hope this tutorial will inspire web designers to create designs which are distinctive and engaging. It’s also for front-end developers who want to learn how to implement those designs using the most efficient HTML and CSS.

Read Art Direction for the Web with CSS Shapes on Smashing Magazine now. You can download the examples from this article too.


Written by Andy Clarke who tagged this with art-direction, design, css


More from Stuff & Nonsense

Andy Clarke demonstrates how to take your product and website designs to the next level.

Take your Squarespace designs to the next level with our premium Squarespace templates.

The popular web design contract template trusted by thousands of web designers and developers.

Andy is an experienced mentor who can help you improve your design skills and develop your career.


I’m available to work on new design projects.