Rich media developer's guide

Masking in HTML5

The decision to use masking and what type of masking to use depends on your creative and creative concept. The materials below are designed as starting points to mimic the kind of masking typically done in Flash.

Three ways to create masks

The ability to make portions of your creative transparent is useful for creatives that overlap a publisher's page, or when animating different elements within your creative. There are three different ways to achieve a masking effect with CSS:

For a more thorough analysis of the clip-path vs. mask properties, see CSS-Tricks' Clipping and Masking in CSS.

 

Overflow:hidden

One method of clipping an element is by nesting the element to be clipped within a div that has overflow:hidden applied to it. This method works in all browsers, but is limited to the shapes you can make with div (and applied border-radius).

Clip-path

Clip-path is a CSS property used to define clipping paths, which are best for hard (vector) edges. Clipping paths are dependent on an SVG shape and offer greater flexibility in terms of geometry. One limitation to note is that the clip-path property is not compatible with any version of Internet Explorer.

Defining clipping paths by hand is challenging unless you're an expert, but there are many free online visual tools, like Clippy, that make it easy to create both simple and complex shapes.

Mask

The mask property is a way to achieve masking with the transparency or luminosity of a source image. Webkit browsers (Chrome and Safari) are the only browsers that support image masking. Learn more about the mask property

For updates on clip-path and mask browser compatibility, check caniuse.com. The overflow:hidden property is fully supported by all browsers.

Pick the approach that works for your campaign

When deciding which option to use, take note that CSS clipping support is limited in Internet Explorer and Safari:

  • IE has no support
  • Safari doesn't support SVG paths; it only handles shapes inlined in the CSS declaration (such as circles and polygons)

For the best browser compatibility, use overflow:hidden to clip content to the bounds of a parent element. The downside is that this limits the mask shape to rectangles and ellipses (using border-radius). The good news is that other important properties of clip-path are maintained:

  • Arbitrary DOM content can be clipped, including text, images, SVG, and canvas.
  • The mask can be animated, at least within the range of shapes that can be attained by a div.
  • Mouse events originating from the invisible region are suppressed. If you can't see part of an element, you also can't accidentally interact with it.

Create common masking effects with simple shapes

While overflow:hidden limits you to simple mask shapes, you can get some useful effects if you animate the mask's properties:

  • Animate the width from 0 to the image's width to create a reveal effect. Example
  • Use box-shadow to create a mask with a feathered edge. Example
  • Set a large border radius and animate width and height to create a circular reveal centered on the content. Example
  • Translate/rotate the mask to create a spotlight effect. Example

Combine masks to create complex shapes

  • Intersection: Create an intersection by nesting the mask containers. For example, intersect a rectangle and circle to create a growing semicircular mask. Example
  • Union: Google Web Designer supports a data type called a "group", which is analogous to a symbol in Flash. Groups allow you to create separate masks that cover identical content, giving the appearance of a single mask with multiple pieces (although in reality each mask has an independent DOM). Example

Animate parent and child elements in opposite directions

When you animate a div, all the child elements animate along with it. So if you want to create the illusion of the mask animating, animate the child elements in the opposite direction to make them appear static. Example

Other techniques to consider

Overlay partially transparent images

Add an image over your content that matches the background in the opaque region, and is otherwise transparent. This gives you arbitrary shapes, but you can't layer masks (since each mask paints over the entire opaque region, rather than selectively rendering to the visible region), and you can't animate mask shape (beyond translation/rotation and scale). Example

Use a canvas element

If all of your content is inside a <canvas>, then you have a lot of flexibility in adding clipping effects. The canvas is a black box, however, and to support rich content, you need a big, complicated runtime.

Was this article helpful?