New Web Layout Possibilities

At the recent An Event Apart conference in Seattle, Jen Simmons of The Web Ahead podcast gave a rich talk about new web layout possibilities.

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.

CSS Shapes
With some simple code, we can take a round image and wrap text around it to honor the shape.

Example
Lorem ipsum dolor sit amet, adhuc vulputate at pro, atqui delicatissimi ut mei. Viris omnesque ut pro, in integre adipisci invenire sed. Sit ne atqui aperiri dissentias. Ex stet munere partem sea. Nostro iudicabit ea vim, ei has mutat fabulas gloriatur, usu no wisi omnis convenire.

Nam ei homero adolescens intellegebat, mea te dicit essent. Vim an nulla legere deterruisset, reque similique eum ad, ne vocent timeam tamquam sed.

CSS
img{
shape-outside:url(image.png);
float:left;
}

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.


CSS Columns
We can also easily create fluid columns.

Example
Lorem ipsum dolor sit amet, adhuc vulputate at pro, atqui delicatissimi ut mei. Viris omnesque ut pro, in integre adipisci invenire sed. Sit ne atqui aperiri dissentias. Ex stet munere partem sea. Nostro iudicabit ea vim, ei has mutat fabulas gloriatur, usu no wisi omnis convenire.

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.

CSS
.cssColumns{
-webkit-columns:100px 3;
-moz-columns:100px 3;
columns:100px 3;
}

The real beauty of this feature is that it works responsively and that text fluidly flows from one column to the next.


Fun With Rotation
And, another fun option. Great for images as well.

Example
Lorem ipsum dolor sit amet, adhuc vulputate at pro, atqui delicatissimi ut mei. Viris omnesque ut pro, in integre adipisci invenire sed. Sit ne atqui aperiri dissentias. Ex stet munere partem sea. Nostro iudicabit ea vim, ei has mutat fabulas gloriatur, usu no wisi omnis convenire.
CSS
#textRotate{
-ms-transform:rotate(353deg);
-webkit-transform:rotate(353deg);
transform:rotate(353deg);
}

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.

Further Resources
CSS Shapes 101 by Sarah Soueidian