CSS Shapes Level 1 describes how content can be wrapped around geometric shapes. As of last week, the specification is a candidate recommendation. Also, both Blink and WebKit now have the latest syntax that matches this latest spec. This means the spec draft is stable enough for you to try out the features in your designs and to provide feedback.
To help you get started, here are some resources:
- New CSS Shapes Syntax: Bem Jones-Bey provides a summary of what has changed in the specification, as well as some great examples.
- Add Shape and Depth to Your Layout with Photoshop and CSS Shapes: Rebecca Hauck takes your image from Photoshop to CSS, and shows how you can use Shapes to flow text around the shape of your image.
- A Simpler Polygon Algorithm for CSS Shapes Level 1: Hans Muller breaks down what is happening in the browser and provides a cool demo. Note: Hans’s article covers
shape-insideis in Level 2 of the spec, which is still in early stages. Anything having to do with
shape-insideis a moving target and subject to change.
So, try it out and do provide feedback!