What I learned in one weekend with CSS Shapes

Matthias Harreither
Dec 5, 2015 · 3 min read

by Matthias

So we all know the typical responsive webdesign at the moment, right? Big big header pictures or videos, several grid systems and our text is caged in some columns. Most of the time the differences between websites are:

  • which grid system you use
  • how many columns you use

Don’t get me wrong, I love grid systems and these big fancy pictures, but the thing is, can we (the webdesigners) do better? I definitely think so, that’s why I decided to get more into this magazine stylish thingy.

Magazines are pretty awesome but a lot of people don’t buy magazines anymore, because we have our super cool tablets, right? ;) So the thing is, when you open a fashion magazine or some other high gloss prints you find pages like this:

Image for post
Image for post
https://maxboam.files.wordpress.com/2011/10/vog-sp1111-007.jpg

This page is a pretty nice example of how layout designers use floating texts around images or even other letters. But can we do this on the web too?

Image for post
Image for post
http://www.michaelwilsonblog.com/wp-content/uploads/2014/03/184321.jpg

That’s right so why we aren’t???

JUST DO IT

Image for post
Image for post
http://nerdreactor.com/wp-content/uploads/2015/06/shia.png

BUT HOW???

Therefore, CSS Shapes come in play.

CSS Shapes

CSS Shapes, Level 1 / March 20, 2014 / http://www.w3.org/TR/css-shapes-1/

Image for post
Image for post
http://labs.thewebahead.net/thelayoutsahead/shapes/index.html
Image for post
Image for post
http://labs.thewebahead.net/thelayoutsahead/shapes/index.html
Image for post
Image for post
http://labs.thewebahead.net/thelayoutsahead/shapes/index.html
Image for post
Image for post
http://labs.thewebahead.net/thelayoutsahead/shapes/index.html
Image for post
Image for post
http://labs.thewebahead.net/thelayoutsahead/shapes/index.html

I fell especially in love with the polygon shape. As you can see in the Chrome extension video below, you can adjust your texts and images pixel perfect.

Image for post
Image for post
http://caniuse.com/#search=shapes
Image for post
Image for post
https://chrome.google.com/webstore/detail/css-shapes-editor/nenndldnbcncjmeacmnondmkkfedmgmp

In the following video you can see how to work with it. It’s similar to work with graphic tools such as Illustrator, Indesign and Sketch. When you are done with the placing, just copy the code from the Chrome developer tools in you CSS file.

So go out there and try CSS Shapes on your own. I really liked it and I will definitely use it on my new projects.

If you want to get in touch with me, feel free to hit me on @MHarreither

-Take care

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store