Getting fancy: Shapes and masks
CSS Shapes allow designers and content creators to match some magazines layouts where the text wraps around images and other polygonal and irregular shapes.
Why do I include shapes in an essay about typography? As you can see in the examples below, shapes change the way the text relates to the surrounding images. Imagine what we can do with irregular shapes or letters (thinking of Dropcap applications).It can also be used to create shapes with text inside the shape (this is not part of the level 1 specification and deferred to level 2 which is currently a working draft.)
In the future we'll be able to use shape inside and exclusions to create magazine equivalent layouts and where creativity will be the driving force, not browser constraints.
Unfortunately there doesn't seem to be much traction with exclusions or full shapes support within the CSS working group (which means that browsers are far from giving us working implementations) so we have to resort to polyfills for shapes to account for incomplete spec support and older browsers that don't support the feature altogether. I am not a fan of polyfills but, even with all the limitations inherent to polyfills, seems like a good compromise for this particular situation.
According to the CSS Masking specification abstract:
CSS Masking provides two means for partially or fully hidding portions of visual elements: masking and clipping.
Masking describes how to use another graphical element or image as a luminance or alpha mask. Typically, rendering an element via CSS or SVG can conceptually described as if the element, including its children, are drawn into a buffer and then that buffer is composited into the element’s parent. Luminance and alpha masks influence the transparency of this buffer before the compositing stage.
Clipping describes the visible region of visual elements. The region can be described by using certain SVG graphics elements or basic shapes. Anything outside of this region is not rendered.
It has long been a trivial exercise to create masks and clip path images in Photoshop or Illustrator (and Photoshop CC makes it a really simple exercise as shown in the Lynda.com course Design the Web: Clipping Masks.) But until clip paths and masks became available in CSS you had to use an external tool to create these effects.
In Getting Fancy: Blend Modes We'll explore possibilities to do non-destructive masking using the CSS Blending draft specification directly in our web content.
Examples and References #
- Shapes 101 — A List Apart
- Getting Started with CSS Shapes * HTML5 Rocks
- Clipping and Masking in CSS
- Masking Tutorial