Given that web design is often in dire need of its own identity and innovation, it was not without self-awareness that Simmons recommended we turn to print magazine layouts for new design inspiration. Point being we need to step outside habitual layout structures for main content, sidebar, header, etc, because most of us are guilty of it and it’s getting darn predictable.
Luckily new support for CSS shapes and columns can help provide awesome new web layout possibilities. My objective here is to work through a couple examples of these relatively new tools that we can start using today.
With some simple code, we can take a round image and wrap text around it to honor the shape.
Nam ei homero adolescens intellegebat, mea te dicit essent. Vim an nulla legere deterruisset, reque similique eum ad, ne vocent timeam tamquam sed.
And this is just the shape-outside property. Watch for shape-inside property support so you can shape your text areas like circles, squares, diamonds, and more.
We can also easily create fluid columns.
Nam ei homero adolescens intellegebat, mea te dicit essent. Vim an nulla legere deterruisset, reque similique eum ad, ne vocent timeam tamquam sed. Nec et lorem possit, at sint appareat gloriatur mei. Mei perfecto rationibus id. Pro te reformidans referrentur, intellegat reformidans et usu. Ex stet munere partem sea.
Nam no falli minimum. Vim te hinc oblique praesent. Ad fugit sonet legimus sed, at usu dico ludus postea, viderer assueverit ne eam. Eam at debitis percipit accommodare, ius ea adhuc fastidii.
The real beauty of this feature is that it works responsively and that text fluidly flows from one column to the next.
And, another fun option. Great for images as well.
I can see this pairing very well with shape-inside when it has support.
Simmons’ talk was thorough and touched on the layout benefits of more emerging properties. Find out where she will be presenting this talk in the future.
CSS Shapes 101 by Sarah Soueidian