Enhancing creativity with CSS Shapes

An emerging web design feature is the ability to craft layouts with text flowing in creative and very interesting ways. It’s enabled via something known as CSS Shapes.

CSS Shapes is not yet widely used throughout the web. But its potential for building beautiful, visually appealing web content is enormous.

I’ve introduced CSS Shapes by way of a basic overview. Here, I’d like to show you another cool example of what’s possible with this really nifty tool.

Let’s look at a fairly common web content layout scenario. Here’s some text, and an accompanying image.

When it comes to producing high quality, fine wines, we generally consider Northern and Central California, France, Italy, Argentina, Australia, and Spain among the best-known regions. But believe it or not, there are regions in Asia also known for winemaking, among them China and Japan. In fact, China is considered to be among the top ten wine markets worldwide. As one of the world’s top five in terms of wine consumption, it’s no surprise that winemaking is very active in China to meet an ever-increasing demand among a growing public with affluence.

The most immediate issue that the text and image don’t go well together. Let’s begin to tackle this by making the text and its background more complementary to the image. This can be accomplished by lightening up the text and adding a matching background color.

When it comes to producing high quality, fine wines, we generally consider Northern and Central California, France, Italy, Argentina, Australia, and Spain among the best-known regions. But believe it or not, there are regions in Asia also known for winemaking, among them China and Japan. In fact, China is considered to be among the top ten wine markets worldwide. As one of the world’s top five in terms of wine consumption, it’s no surprise that winemaking is very active in China to meet an ever-increasing demand among a growing public with affluence.

This looks considerably better now. But there’s quite a bit of spacing around the wine bottles.

A simple way to solve this could be to simply crop the image, thereby bringing the text closer to the wine bottles. But that would be problematic as there’s a fine gradient background that would be disrupted by the cropping.

This is where CSS Shapes can rescue us! We can define a region, for text to flow around. This region can be a shape, whether a rectangle, ellipse, or polygon.

Here, we’ll add a rectangle and define its boundaries around the wine bottles. See below.

You’ll notice that the rectangular region is invisible. I added the blinking box there as a visual effect to signify the presence of this region.

This is looking very nice now. But we can take it another step further with a polygon. Check this out:

You can define the shape boundaries of the polygon by coding it out in CSS. But that’s difficult. There’s a much more intuitive way, through the developer tools in the Firefox browser. You can just click and drag around the handles in the polygon to your heart’s desire. You can also add or remove handles with ease.

Well, that about wraps it up. Hope you enjoyed this little tour of CSS Shapes!

If you’d like to dive in more and follow along with code examples, click here.