The CSS Shapes Module will Revolutionize Web Design

Explaining Markdown

I recently posted a tweet that poked fun at the relationship between designers and the W3C (the organization that creates web standards like HTML and CSS).

Thinking Outside the Box

For decades we’ve meticulously sliced up images to create rounded corners, shadows, gradients, and ornate detail. The W3C added these features to the CSS standard and many web designers rejoiced as browser support followed, because it meant that we didn’t have to rely on images anymore. However, the recent flat design trend has made these celebrated features much less relevant. From Windows 8 to iOS 7, corners are becoming square, gradients are becoming flat, and drop shadows are being dropped completely. Any artistic field is like a pendulum swinging back and forth, so we’ll see a resurgence of these CSS tools someday soon (and they’ll be used in a whole new way), but the present is looking very flat indeed.

That said, the W3C hasn’t been asleep at the wheel. Very recently they introduced the first draft of the CSS Shapes Module. This is a fantastic step forward in technology, but it’s a giant leap for web design. Today, web pages are made entirely of rectangles. Web designers have found many clever ways to hack around this and make it appear otherwise, but it’s never easy. Popular techniques include slicing up images or coding up some clever CSS, and impressive as these are, they’re stretching browser technology to its limits. These franken-shapes can be very difficult to work with because, although they look like irregular shapes to us, the browser sees them as boxes. By contrast, the CSS Shapes module is a straightforward method for creating true polygonal shapes. You can create triangles, hexagons, stars, and just about any other polygon you can image. They’ve also included properties and values that allow for circles and ellipses. As if that weren’t enough, they have also added the ability for text to flow around the edges of shapes; a design tool that print designers have enjoyed for ages. Below is an example image from the W3C:

Two triangles with text flowing around their borders.

Try CSS Shapes Today

CSS shapes are brand new and browser support will take some time, but if you’d like to play with shapes right now, check out Bear Travis’ Polygon Drawing tool. In order to use it properly, you’ll need to install Google Chrome Canary and then enable the experimental WebKit features flag under chrome://flags. Indeed, browser support is scant right now, but that will come in time. In the tool, you can drag around some handles on a polygon and see the code that it generates. Here’s an example shape with the accompanying code:

A polygonal shape with text flowing inside of it.

polygon(66.67px 200.00px,133.33px 315.47px,266.67px 315.47px,333.33px 200.00px,266.67px 84.53px,133.33px 84.53px)

A Revolution

For web designers, this is huge. It means that we can literally think outside the box and move beyond the rectangular landscape that has defined the web for so long. It’s hard to fully visualize the future use cases, but we can look to magazines and print designers to get an idea of how this might be used in the immediate. This welcome disruption to the status quo comes at the perfect time. Flat design drops many of the elements and principles of art in favor of emphasizing simplicity through color and composition. I believe a newfound emphasis on shape will be the perfect complement to this aesthetic in the coming years.

Free Workshops

Watch one of our expert, full-length teaching videos. Choose from HTML, CSS or WordPress.

Start Learning

Nick Pettit

Nick is a designer, public speaker, and teacher at Treehouse. He is also a co-host of The Treehouse Show. Twitter: @nickrp

Comments

9 comments on “The CSS Shapes Module will Revolutionize Web Design

  1. I think the real question here is whether or not we can put the tag around those shapes to make them awesome :-p.

  2. Oh, this is intriguing. I know that we can emphasize Border-Radius to create some pretty ugly circles… But, that’s about it. I would like to see this implemented sooner than anticipated.

  3. I look forward to being able to use CSS shapes in about 3 years. That’s why the new stuff is annoying: you won’t be able to use it forever :