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

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.