Every week we tweet a lot of interesting stuff highlighting great content that we find on the web that can be of interest to web designers.

The best way to keep track of our tweets is simply to follow us on Twitter, however, in case you missed some here’s a quick and useful compilation of the best tweets that we sent out this past week.

Note that this is only a very small selection of the links that we tweeted about, so don’t miss out.

To keep up to date with all the cool links, simply follow us @DesignerDepot

6 Time-saving tools and references every web designer should bookmark http://depot.ly/mg3hn

Doing Good Means Good Business: Peter Glatzer and Adrian Grenier Make SHFT Happen http://depot.ly/mfxaf

A Customizable Desk System That Tames Creative Chaos http://depot.ly/mfxkT

Colorful acrylic collage portraits by Meguru Yamaguchi http://depot.ly/mfxfy

videry.me  – a growing repository of curate videos for Web designers and developers /@smashingmag

90 top-class typography tutorials: http://depot.ly/mfwkD  #typography via @netmag

The Genius Of Instagram’s New Video: It Can Also Stay Still http://depot.ly/mfwe0

Draft: The App for All Your Writing Needs http://depot.ly/mfvPy

Great ‘Superman’ cereal boxes http://depot.ly/mdaGS

Perhaps the coolest car commercial you’ll ever see http://depot.ly/md9Qn  #minddrive

Google’s clearest statement yet on NSA & PRISM: No server access, no back door, no drop box, no free-for-all http://depot.ly/md8f2

Good to know: 6 Brands That Are Mastering Vine http://depot.ly/mb4GQ  /@socialfresh

Yahoo: We Take User Privacy Seriously Too! http://depot.ly/mb4qv  via @marketingland

Twitter Canada makes its official debut http://depot.ly/mb4Ar

Peter Donnelly shows us the weirdos from his circus http://depot.ly/maPfY

Everything you need to know about Adobe’s new ‘CC’ releases http://depot.ly/m8XA0

How Cadillac Designed A Comeback http://depot.ly/m8Xpk

Andrew Lyons’ illustrations are oh so lovely! http://depot.ly/m8Xez

Might interest you: 10 Best Alternatives To Adobe Dreamweaver http://depot.ly/m8WRI

How Nathan Barry Made $12,000 in eBook Income in 24 Hours http://depot.ly/m8WVB

The Best of “Movie Poster of the Day” from @mirkohumbert – http://depot.ly/m6j40

 Want more? No problem! Keep track of all our tweets by following us @DesignerDepot

Ventography Script Font by Måns Grebäck – only $15!

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).

I feel bad for the W3C. For years we begged for gradients, so they gave us gradients. So what do we do? FLATTEN ALL THE THINGS.

— Nick Pettit (@nickrp) June 14, 2013

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:

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:

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.

The post The CSS Shapes Module will Revolutionize Web Design appeared first on Treehouse Blog.