Here at An Event Apart (an A List Apart sibling) we recently refreshed the design of our “ Why Should You Attend? ” page, which had retained an older version of our site design and needed to be brought into alignment with the rest of the site. Along the way, we decided to enhance the page with some cutting-edge design techniques: non-rectangular float shapes and feature queries. Article Continues Below
To be clear, we didn’t set out to create a Cutting Edge Technical Example™; rather, our designer (Mike Pick of Monkey Do ) gave us a design, and we realized that his vision happened to align nicely with new CSS features that are coming into mainstream support. We were pleased enough with the results and the techniques that we decided to share them with the community.
Here are some excerpts from an earlier stage of the designs ( Fig. 1 ). (The end-stage designs weren’t created as comps, so I can’t show their final form, but these are pretty close.)
Fig 1: Late-stage design comps showing “desktop” and “mobile” views. What interested me was the use of the circular images, which at one point we called “portholes,” but I came to think of as “bubbles.” As I prepared to implement the design in code, I thought back to the talk Jen Simmons has been giving throughout the year at An Event Apart. Specifically, I thought about CSS Shapes and how I might be able to use them to let text flow along the circles’ edges—something like Fig. 2 .
Fig 2: Flowing around a circular shape. This layout technique used to be sort of possible by using crude float hacks like Ragged Float andSliced Sandbags, but now we have float shapes! We can define a circle—or even a polygon—that describes how text should flow past a floated element.
“Wait a minute,” you may be saying, “I haven’t heard about widespread support for Shapes!” Indeed, you have not. They’re currently supported only in the WebKit/Blink family—Chrome, Safari, and Opera. But that’s no problem: in other browsers, the text will flow past the boxy floats the same way it always has. The same way it does in the design comps, in fact.
The basic CSS looks something like this:
float: left; margin: 0 40px 0 0 ;
shape-outside: circle(150px at 130px 130px);
float: right; margin: 0 0 0 40px;
shape-outside: circle(150px at 170px 130px);
}[/code] Each of those bubble images, by the way, is intrinsically 260px wide by 260px tall. In wide views like desktops, they’re left to that size; at smaller widths, they’re scaled to 30% of the viewport’s width.
To understand the shape setup, look at the left-side bubbles. They’re 260×260, with an extra 40 pixels of right margin. That means the margin box (that is, the box described by the outer edge of the margins) is 300 pixels wide by 260 pixels tall, with the actual image filling the left side of that box.
This is why the circular shape is centered at the point 130px 130px —it’s the midpoint of the image in question. So the circle is now centered on the image, and has a radius of 150px . That means it extends 20 pixels beyond the visible outer edge of the circle, as shown here ( Fig. 3 ).