CSS Shapes — Let the Text Flow Around You

There’s magic in the air around CSS right now. There’s so much new to be excited about. One simple thing that you should get excited about is the CSS Shapes Module.

These are not CSS shapes like building triangles out of border property hacks. This is taking your content and shaping it around shapes and images.

We all know how the internet works. It’s a bunch of rectangles. Some rectangles are filled with text. Some have images. Some rectangles have rounded corners. These all are still rectangles. This dates back to table-based layout. A table is literally a grouping of rectangles. It’s all we’ve known.

What if I told you, that’s not the way it has to be?

The CSS Shapes Module allows for us to wrap text around a shape (and with Level 2, flow text INTO a shape, but that’s still a ways away from production).

It’s actually relatively simple to implement and works in VERY modern browsers with a simple fall back just to the way the internet has always worked.

Let’s take a look at a few examples.

So, if we have a circle (a shape I’m building via CSS in the other definition of CSS Shapes) and we float it left to allow the text to wrap around it, we get what we expect. A circle with text around it with two hard lines of whitespace.

Typical float left with hard edges

That creates a little visual dissonance, though. If we’re trying to add fluidity to our design, the hard lines of that text ruin the feeling.

We can simply add a property of css called “shape-outside” and assign a value of “circle()” and now the text KNOWS that that element is a circle and wraps around it in a nice fluid curve.

Image of the shape-outside being applied

Circle is by far the easiest “cool” shape-outside, but you can also do ellipse() and polygon(), url() for images.

Here’s a CodePen that shows an example of polygon() and url() as well as the circle example from above.

See the Pen CSS Shapes Module by Bryan Robinson (@brob) on CodePen.light

You May Also Enjoy

Top 3 uses for the ::before and ::after CSS pseudo elements

It’s no secret that I'm a fan of ::before and ::after pseudo-elements. I use them to great effect for creating darkened overlays in this previous post. They have so many uses beyond that, though. Here are my top 3 uses for them in my every-day development process.

How To: Use CSS Grid to Mix and Match Design Patterns

In a previous tutorial, I described how to create a simple fluid card grid with CSS Grid. In this tutorial, we'll take it a step farther and create promotional spaces that morph in interesting ways.

How To: Use CSS :after pseudo-elements to create simple overlays

Use :after elements to create the simplest HTML possible to render useful and fun overlays on top of background images. Then extend them with blend-modes!

My Side Projects

Web Workers Logo Web Workers Logo Web Workers Logo Web Workers Logo