What I learned in one weekend with CSS Shapes

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
img {
float:left;
margin-right: 30px;
margin-bottom:30px;
width: 50%
}
http://labs.thewebahead.net/thelayoutsahead/shapes/index.html
shape-outside: circle();
http://labs.thewebahead.net/thelayoutsahead/shapes/index.html
shape-outside: ellipse (50%,50%);
http://labs.thewebahead.net/thelayoutsahead/shapes/index.html
shape-outside: border-box;
shape-margin: 30px;
http://labs.thewebahead.net/thelayoutsahead/shapes/index.html
shape-outside: polygon (50% 0, 100% 50%, 50% 100%, 0 50%);

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