In this overview of the CSS clip and mask properties, Ryan Boudreaux shows you how to use them with examples of code and basic syntax.
The commonly used clipping and masking actions that graphic designers have used for years in photo and imaging editing software applications, which were applied to PNG, PSD, or SVG files, can also be applied using pure CSS, and this post will examine the history of the CSS clip property along with a short demonstration of the property in action. I will also review the CSS clip-path and CSS clip-mask properties. Each description will include the syntax for use along with the current browser support to give you a better idea of what can be implemented within your web development environments and customer requirements. Then I will wrap up with several additional resources for reading and demonstrations that highlight the clip, clip-path, and clip-masking properties.
Original specification for CSS Clip
The CSS2.1 specification for visual effects includes the clip property, which came out some time ago, and was limited to a rectangular shape defined by offsets from the border edge of the box with distances for top, right, bottom, and left. In the example code snippet below, the only valid value works for an absolute positioned element with the following syntax:
rect (top, right, bottom, left).
And the example CSS code snippet below:
}Notice that the image position is set to absolute; also of note is that both the top and bottom values are offsets from the top border and not respectively from top and bottom borders. The Grand Canyon example below shows the "before" image in Figure B, and then after the clip property is applied in Figure C:
Before image with no clipping applied
After image with clipping appliedThe grid lines below demonstrate how the clipping effect is applied in the original image as seen in Figure D below:
Once you see the clipping in action, it is easier to understand the logic behind how the element gets clipped. Probably the hardest concept to wrap your head around is getting the bottom and right clipping set to where you want the element to be clipped. Naturally you would think of clipping the right from the right edge and the bottom from the bottom edge, but it is the opposite, you clip the bottom as it relates to the top edge and the right as it relates to the left edge as illustrated above. If you can think in terms of a cascading waterfall, then you might grab the concept much easier, with a top down and then left to right model.
Basic browser support for the CSS clip property is limited in IE6 and IE7; however, a workaround for IE requires you to separate the values with white space in place of the comma separated values.
The W3C Scalable Vector Graphics (SVG) 1.1 (Second Edition) specification states that it can contain any HTML element including path elements, text elements, basic shapes or use elements, and SVG container elements as well. If a use element is a child of a <clipPath> element, it must directly reference path, text, or basic shape elements. The <clipPath> element can also be combined with multiple graphical elements to create a merged single-clipping region.
The syntax for clip-path is represented below for shapes, URLs or none:
clip-path: <shape> | <url> | none
The basic shapes and graphical elements in SVG are listed below and can be utilized to define a particular clipping region, for all syntax examples shown below; the x refers to top setting and y refers to the left setting.
Defines a rectangle with an origin expressed by x and y coordinates, and a size expressed by width and height in pixels. The optional arguments rx and ry define the "rounded corners" within the horizontal and vertical direction, the syntax is displayed below.
rectangle(<x>, <y>, <width>, <height> [, <rx>, <ry>])
Defines a circle was a center point expressed by cx and xy coordinates, and a radius r, the syntax is displayed below.
circle(<cx, <cy>, <r>)
Defines a circle with a center point expressed by cx and cy, and two radii rx and ry for the horizontal and vertical radius paths, the syntax is displayed below.
ellipse(<cx, <cy>, <rx>, <ry>)
Defines a polygon based on the point list expressed in pixels for x1, y1, x2, y2 and on xn, yn.
polygon(<x1> <y1>, <x2> <y2>, ..., <xn> <yn>)
Basic browser support for the clip-path property includes Chrome 1, Firefox 1.5, IE 9, Opera 9, and Safari 3.0.4.
Clip mask property
The W3C Masking specification states that it provides a second method for partially or fully hiding portions of visual elements by masking. The specification also details the types of masks which include sixteen variations on the property for layered masks and box-image masks, and they include: mask, mask-image, mask-repeat, mask-position, mask-clip, mask-origin, and mask-type. The mask-box-image property allows an image to be divided into nine tiles with four corners, four edges, and a single middle section. Each tile can be sliced, scaled, and/or stretched into any combination of shape or size that will fit the masked region. The most useful aspect of this property allows you to modify the borders and edges of elements. Several of the box-image mask properties include the mask-box-image, mask-box-image-source, and mask-box-image-slice.
Basic browser support for the clip mask property is currently limited in Chrome 17+, and Safari 5.1+.
Further reading and examples
For more examples and information on implementing the SVG clipping and masking properties, you can check out the article, "Clipping and Masking," from the SVG Essentials wiki by OReilly. For another great example of the clip-path property in action, you can view the SVG clipPath demo by Sawyer Hollenshead. More examples that embrace several principles of the clipping, clip-path, and masking properties are brought to light by Dirk Schulze's article on CSS Masking from HTML5 Rocks Tutorials.