Stuff & Nonsense product and website design

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


Would you like advice and inspiration on making better designs for the web?

Every two weeks you’ll get design inspiration and insights on how to improve your design. View some recent emails, sign up today, and get:

    I promise never to share your email and you can unsubscribe with just one click.

    Get a free set of Layout Love grid templates if you sign up today.

    Hire me. I’m available for coaching and to work on design projects.