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
Therefore, CSS Shapes come in play.
shape-outside: ellipse (50%,50%);
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…….?
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.
THE WEB AHEAD
September 2, 2014 So far, page layout on the web has predominantly consisted of a lot of boxes stacked on top of boxes…thewebahead.net
Creating Non-Rectangular Layouts With CSS Shapes
Today we can create all kinds of shapes with CSS using CSS transforms, but all these shapes do not affect the flow of…sarasoueidan.com
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