Having fun with CSS Shapes

The web has really pushed the envelope of creative freedom and visual layout possibilities. Today, we’re able to design interfaces and presentations free of the limitations and hacked workarounds we’ve all had to accept as compromises.

New CSS features are giving us the freedom to do more than ever – and move closer to the unrestricted flexibility of designing for traditional print-based media.

An example of these new creative capabilities is something called CSS Shapes. Let’s dive in and see what it can do.

Below is a simple layout with an image floated to the left alongside some text.

Valentine’s Day is one of the major commercialized holidays in the United States, in terms of consumer spending. On this day, which occurs every 14th of February, it’s a commonly formalized tradition for loved ones to recognize each other in a romantic way, usually with flowers and gifts, and also with dinner. A reality with dining out on Valentine’s Day is that restaurants get very busy and raise their prices by offering exclusive Valentine Day’s menu options. For this reason, many choose to celebrate with an intimate meal prepared at home.

This actually looks pretty good, in and of itself. But add CSS Shapes, and see what happens now:

Valentine’s Day is one of the major commercialized holidays in the United States, in terms of consumer spending. On this day, which occurs every 14th of February, it’s a commonly formalized tradition for loved ones to recognize each other in a romantic way, usually with flowers and gifts, and also with dinner. A reality with dining out on Valentine’s Day is that restaurants get very busy and raise their prices by offering exclusive Valentine Day’s menu options. For this reason, many choose to celebrate with an intimate meal prepared at home.

By wrapping the text around the image, the layout now adds a touch of elegance.

So, how is this possible? It all begins with a simple HTML layout of the image and a text paragraph.

<img src="heart.png" />
<p>Valentine's Day is one of the...</p>

For the CSS, two lines of code make it all happen.

img {
	float: left;
	/* These two lines define CSS Shapes */
	shape-outside: url(heart.png);
	shape-margin: 20px;
}

The shape-outside property defines the region around which text will flow. In this case, it’s the same heart image placed in the HTML. Text flows around the heart shape due to the transparent alpha channel of the PNG image.

For CSS Shapes to work, it’s essential that the image be floated (left or right).

The gap between the heart and the text is possible through the shape-margin property. You can visualize this clearly by inspecting the CSS through the web browser. Look at the gray band partitioning the heart from the text.

This is just the beginning of what you can do with CSS Shapes. If you want to see another example, visit here.

Or, choose this if you’re ready to dive in further with lots more code examples.