All we did till now was beautiful text, well paired and calculated. But what if we want to break the old squared development and present our text inside a wide array of shapes?
Luckily, with the newly-introduced CSS3 shape element (which is still much unsupported) we can do it!
I will guide you through this, it will just be a little bit since we'll be able to fully use it in our day-by-day projects. Combined with clipping and masking, CSS filters, compositing, and blending we'll be able to make the web our playground more than ever. But it's time for us to focus on our typography.
You can apply a shape to an element on the page by attaching one of its properties, since the shapes right now are functions:
Element {
Shape-outside: polygon(parameters);
}The currently existing functions are:
Circle
Ellipse
Inset
Polygon
Each of them is defined by a set of points. The properties instead are:
Shape-outside(wrap content around a shape)Shape-inside(wrap its content inside...