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:

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?

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

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

JUST DO IT

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/

Examples:

http://labs.thewebahead.net/thelayoutsahead/shapes/index.html
http://labs.thewebahead.net/thelayoutsahead/shapes/index.html
http://labs.thewebahead.net/thelayoutsahead/shapes/index.html
http://labs.thewebahead.net/thelayoutsahead/shapes/index.html
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.

Can I use …….Shapes…….?

http://caniuse.com/#search=shapes

Tools

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.

Useful links

THE WEB AHEAD

Creating Non-Rectangular Layouts With CSS Shapes

Demos by Jen Simmons

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