What I learned in one weekend with CSS Shapes
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:
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?
That’s right so why we aren’t???
JUST DO IT
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:
img {
float:left;
margin-right: 30px;
margin-bottom:30px;
width: 50%
}
shape-outside: circle();
shape-outside: ellipse (50%,50%);
shape-outside: border-box;
shape-margin: 30px;
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…….?
Tools
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