These two features allow us to hide parts of an element in order to show a background image or color, or to give an element a special shape. Both terms can be a bit confusing, so let's see a brief description of each:
- Clipping is done with vectors or paths since this CSS feature was taken from the SVG specification. It creates a solid edge between the element and its background.
- Masking, on the other hand, uses images/bitmaps. With images, we can have "feathered" or blurred edges, whereas with clipping we have straight edges.
Let's check these properties out.
The mask CSS property is the shorthand for the mask-clip, mask-composite, mask-image, mask-mode, mask-origin, mask-position, mask-repeat, and mask-size properties. We'll see each of these in more detail later. The mask property looks like this:
mask: url(../images/mask.png) 50% 50% / contain no-repeat border-box;
A group of all the prior properties is called a "mask layer".
It's recommended to use the shorthand syntax over individual specific properties, since the shorthand resets undeclared properties to their initial values. This is helpful because it makes it easier to override values later in the cascade, thus avoiding specificity issues and potential use of the !important directive.
Additionally, mask-clip and mask-origin use a geometry value. If we declare only one value, then both properties will use that value. With two values, mask-clip will use the first one and mask-origin will use the second one.
As I mentioned before, CSS masks use images, which means that we can reference a bitmap/raster file with a transparency or a background gradient with the linear-gradient() CSS function. We can even create a mask by referencing several images in the same declaration.
There are two types of mask: alpha masks and luminance masks. We'll see what each of these types of mask are later.
CSS:
/*Mask referencing a bitmap file.
We are specifying: mask-image mask-position / mask-size mask-repeat mask-clip
*/
.element {
mask: url(../images/mask.png) 50% 50% / contain no-repeat border-box;
}
/*Mask using the CSS linear-gradient property*/
.element {
mask: linear-gradient(black 5%, transparent);
}
/*Mask created by declaring multiple masks*/
.element {
mask:
url(../images/mask.png) 50% 50% / contain no-repeat border-box,
linear-gradient(white 5%, transparent);
}The mask-clip CSS property determines the area of the element that will be affected by the mask, and it looks like this:
mask-clip: padding-box;
This property is similar to the background-clip CSS property. Refer to Chapter 4, CSS Properties – Part 1, for more information.
Multiple comma-separated keyword values can be present in the same declaration. Each value represents its corresponding image in the comma-separated values of the mask-image property.
It supports four keyword values: border-box, content-box, padding-box, and no-clip.
border-box: This is the default value. If the element has any borders, they are seen through the mask.content-box: Only the parts of the element that are inside its content area are visible through the mask.padding-box: If the element has any padding, it will be seen through the mask.no-clip: The content is not clipped.
CSS:
/*Padding box clipping*/
.element { mask-clip: padding-box; }
/*Multiple values*/
.element { mask-clip: padding-box, border-box; }The mask-composite CSS property defines how multiple masks with different shapes are combined or composited to form a single mask, and it looks like this:
mask-composite: intersect;
The mask-composite property works when mask-image is used and at least two mask images are declared. Multiple comma-separated keyword values can be present in the same declaration. Each value represents its corresponding image in the comma-separates values of the mask-image property.
The
mask-composite CSS property supports four keyword values: add, subtract, exclude, and intersect.
For example, picture part of triangle over part of a circle, where the triangle is on top and the circle below; the different types of composite make different shapes of masks:
intersect: The shape of the mask is where the triangle and the circle overlap, or intersect. The rest of the shape is discarded.exclude: The part where the triangle and the circle intersect is discarded, and the rest of the elements is what makes the mask.subtract: Since the triangle is on top, it will trim or crop the circle, thus leaving a Pac-Man shape mask.add: The triangle is fused to the circle creating a single shape that will be used as the mask.
CSS:
/*Intersect the masks*/
.element { mask-composite: intersect; }
/*Multiple values*/
.element { mask-composite: intersect, exclude; }The
mask-image CSS property defines the image or images to be used as mask layers on any given element, and it looks like this:
mask-composite: intersect;
The mask-image property may also refer to <mask> elements in an SVG file. Multiple values are comma-separated. The images can be bitmap files, SVGs, and even CSS gradients that are images as well.
CSS:
/*Mask referencing a bitmap*/
.element { mask-image: url(../images/mask.png); }
/*Mask using a CSS gradient*/
.element { mask-image: linear-gradient(black 5%, transparent); }
/*Mask referencing an SVG <mask>*/
.element { mask-image: url(../images/file.svg#mask); }
/*Multiple values*/
.element { mask-image: url(../images/mask.png), linear-gradient(black 5%, transparent); }The mask-mode CSS property defines whether the mask layer is an alpha mask or a luminance mask. These terms are the actual keyword values, and it looks like this:
mask-mode: alpha;
Multiple comma-separated keyword values can be present in the same declaration. Each value represents its corresponding image in the comma-separates values of the mask-image property.
Alpha masks use the alpha channel of the image. Whatever is transparent will be covered; whatever is opaque will show. Of course, a semi-transparent area on the image is partially covered.
The
mask-origin CSS property defines the location or position of the mask layer in relation to the element's box starting at the top left corner, and it looks like this:
mask-mode: alpha;
The mask-origin property works in a similar way to the background-origin property. Refer to Chapter 4, CSS Properties – Part 1, for more information.
Now, this property can be used in both HTML and SVG elements. However, there are some keyword values that apply to one that won't work on the other.
Multiple comma-separated keyword values can be present in the same declaration. Each value represents its corresponding image in the comma-separates values of the mask-image property.
The HTML keyword values are border-box, padding-box, margin-box, and content-box.
The SVG keyword values are view-box, fill-box, and stroke-box.
border-box: The origin starts at the top left corner of the border box. It will include the border and any padding (if any is declared) when applying the mask, but it will not go beyond that border.padding-box: The origin starts at the top-left corner of the padding box. It will include the padding when applying the mask, but it will not include any borders if any are declared.margin-box: The origin starts at the top-left corner of the margin box. It will include the margin, the border, and the padding when applying the mask.content-box: The origin starts at the top-left corner of the content box. It will include only the content area. No margins, padding, or borders are taken into consideration.view-box: It uses the closest SVG viewport as a reference box.fill-box: The position of the mask is relative to the object bounding box.stroke-box: The position of the mask is relative to the stroke bounding box.
CSS:
/*Content box origin; the mask will exclude borders and paddings*/
.element { mask-origin: content-box; }
/*Multiple values*/
.element { mask-origin: border-box, padding-box; }The mask-position CSS property defines the starting position of the mask, and it looks like this:
mask-position: right top;
This property works similar to the background-position property. Refer to Chapter 4, CSS Properties – Part 1, for more information.
Multiple comma-separated keyword values can be present in the same declaration. Each value represents its corresponding image in the comma-separates values of the mask-image property.
The mask-position CSS property supports several types of values: four keyword values, top, right, bottom, and left; a length value, px, em, in, mm, cm, vw, and so on; and a percentage value such as 50%, 85%, and so on.
CSS:
/*Keyword values*/
.element { mask-position: right top; }
/*Length and Percentage values*/
.element { mask-position: 50px 25%; }
/*Multiple values*/
.element { mask-position: right top, 50% 50%; }The mask-repeat CSS property defines whether a mask layer is repeated or not, and it looks like this:
mask-repeat: space;
This property works in a similar way to the background-repeat property. Refer to Chapter 4, CSS Properties – Part 1, for more information.
Multiple comma-separated keyword values can be present in the same declaration. Each value represents its corresponding image in the comma-separates values of the mask-image property.
It supports six keyword values: repeat, no-repeat, repeat-x, repeat-y, space, and round.
repeat: The mask will be repeated on both the X and Y axes. This is the default value.no-repeat: The mask is not repeated on any axis. The mask image is displayed only once.repeat-x: The mask is repeated on the X axis (horizontally).repeat-y: The mask is repeated on the Y axis (vertically).space: The mask is repeated as many times as possible without being clipped or cut in both the X and Y axes.round: Similar to the space value, the difference is that the mask images are rescaled in order to fit the specified direction.
CSS:
/*Space out the mask without clipping it*/
.element { mask-repeat: space; }
/*Repeat the mask in the X-axis (horizontally)*/
.element { mask-repeat: repeat-x; }
/*Multiple values*/
.element { mask-repeat: space, repeat-x; }The mask-size CSS property defines the dimensions or size of a mask image, and it looks like this:
mask-size: contain;
The mask-size property works similar to the background-size property. Refer to Chapter 4, CSS Properties – Part 1, for more information.
Multiple comma-separated keyword values can be present in the same declaration. Each value represents its corresponding image in the comma-separates values of the mask-image property.
The mask-position CSS property supports several types of value: a length value, a percentage value, and three keyword values.
Length value: This is when we use one of the following units:px,em,in,mm,cm,vw, and so on.Percentage value: This is when we use percentages such as 50%, 85%, and so on.contain: This scales the image mask without distorting its aspect ratio to fit the maximum width or height of the element.cover: This scales the image mask and distorts it if necessary in order to fit the maximum width or height of the element. If the image mask is larger on its width or height, it will get clipped.auto: This scales the image mask to the actual size of the image's intrinsic proportions without distorting it.
CSS:
.element {
mask-size: contain;
}The mask-type CSS property is specifically for SVG files. It specifies if an SVG <mask> element is an alpha or a luminance mask.
For the definitions of alpha and luminance masks, refer to the mask-mode property.
The mask-border CSS property is the shorthand for the mask-border-source, mask-border-mode, mask-border-slice, mask-border-width, mask-border-outset, and mask-border-repeat properties. It looks like this:
mask-border: url(../images/border-image-mask.png) 15 / 15px stretch and so on;
The mask-border-source CSS property defines an image that is to be used in the border-image declaration.
CSS:
/*Border image referencing a bitmap file*/
.element { mask-border-image: url(../images/border-image-mask.png); }
/*Border image using a CSS gradient*/
.element { mask-border-image: linear-gradient(red, transparent); }The mask-border-mode CSS property defines whether the image used for the mask is an alpha mask or a luminance mask.
For the definitions of alpha and luminance masks, refer to the mask-mode property.
CSS:
.element {
mask-border-mode: luminance;
}The mask-border-slice CSS property is used to slice the image into nine parts, and it looks like this:
mask-border-slice: 40;
Think of this example: take a square image and trace two vertical lines and then two horizontal lines. We end up with nine parts, like Tic-Tac-Toe, on top of the image.
This property supports one, two, three, or four keyword offset values: top, right, bottom, left, and fill. These values, except fill, can be declared using either a number value without a unit or a percentage value using 50%, 85%, and so on.
If one value is declared, all four sides take that value. If two values are declared, the first value is for the top and bottom sides, and the second value for the left and right sides. If three values are declared, then the first value is for the top side, the second value is for the left and right sides, and the third for the bottom side. If four values are declared, they correspond to top, right, bottom, and left sides.
By default, the center of the image mask is discarded and treated as empty. If this value is present, the center will be taken into account and will become part of the mask.
CSS:
/*All sides are offset by 40*/
.element { mask-border-slice: 40; }
/*Top & bottom and left & right values*/
.element { mask-border-slice: 20% 30%; }
/*Make the center of the image part of the mask with top & bottom, and left & right offsets*/
.element { mask-border-slice: fill 40 25; }The
mask-border-width CSS property scales the mask image slices created by the mask-border-slices property, and it looks like this:
mask-border-width: auto;
This mask-border-width property supports one, two, three, or four keyword offset values: top, right, bottom, left, and auto. These values, except auto, can be declared using either a number value without a unit, or a percentage value such as 50%, 85%, and so on.
If one value is declared, all four sides take that value. If two values are declared, the first value is for the top and bottom sides, and the second value for the left and right sides. If three values are declared, then the first value is for the top side, the second value is for the left and right sides, and the third for the bottom side. If four values are declared, they correspond to top, right, bottom and left sides.
The
mask-border-outset CSS property defines the amount the border mask image area extends beyond its border box, and it looks like this:
mask-border-outset: 10px;
This property supports one, two, three, or four keyword outset values: top, right, bottom, and left. These values can be declared using either a number value without a unit, or a length value using px, em, in, mm, cm, vw, and so on. The number value without a unit is a multiplier of the border-width property of the element.
If one value is declared, all four sides take that value. If two values are declared, the first value is for the top and bottom sides, and the second value for the left and right sides. If three values are declared, then the first value is for the top side, the second value is for the left and right sides, and the third for the bottom side. If four values are declared, they correspond to the top, right, bottom and left sides.
CSS:
/*All four sides have the same value*/
.element { mask-border-outset: 10px; }
/*Top & bottom and left & right values*/
.element { mask-border-outset: 2 6; }
/*Top, left & right, and bottom values*/
.element { mask-border-outset: 5 20px 2; }The
mask-border-repeat CSS property defines how the image mask for all four sides and the center are scaled and tiled (repeated) around the element, and it looks like this:
mask-border-repeat: repeat;
The
mask-border-repeat property supports one or two keyword values. The values are: repeat, round, stretch and space.
The mask border image is tiled (repeated). Under certain circumstances, the image mask can be clipped on the edges showing only part of it.
The clip-path CSS property is used to partially or fully hide parts of an element and it looks like this:
clip-path: url(..images/file.svg#clipping-path);
We can say that clip-path is a form of masking. The difference is that clipping uses a vector graphic to do the clipping, rather than a bitmap/raster image.
This vector graphic can be a basic shape or an SVG path.
The clip-path CSS property combined with the shape-outside property can create amazing layouts. With this combination, we can make a paragraph "curve" around a clipped element whose basic shape is also a curve or circle.
This property supports four values: three functions: url(), a shape, a geometry box, and one keyword value none.
This CSS function points to an SVG clipPath element that will be used as the clipping path.
CSS:
/*Clipping path referenced from an external SVG file*/
.element { clip-path: url(..images/file.svg#clipping-path); }
/*Clipping path referenced from an embedded SVG*/
.element { clip-path: url(#clipping-path); }This CSS function declares a circle as a clipping path. This function accepts two arguments: a shape radius and a position.
- Shape radius: It defines the radius of the circle. It supports a length, a percentage, and two keyword values. Negative values are not allowed.
The two keyword values are:
closest-sideorfarthest-side.closest-side: This is the default value. If this value is not declared, the browser will take the length from the center of the circle to its closest side, and create a circle based on that distance. With this, the circle never bleeds or overflows the content, it's always complete.farthest-side: This value will create a circle by taking the length from the center to the farthest side. This means that if the element has a side that is longer than the other, the circle will bleed or overflow on the opposite sides.
- Position: It defines the location of the circle. The position value is preceded by the
atword. If this value is not declared, the circle will be positioned at the center of the element. The values for this argument are the same as those of thebackground-positionproperty.
CSS:
/*Circle 150px wide and tall with location*/
.element { clip-path: circle(150px at 0 50%); }
/*Circle without location is centered on the element*/
.element { clip-path: circle(150px); }
/*Circle defaults to closest-side and is centered on the element*/
.element { clip-path: circle(); }This CSS function declares an ellipse as a clipping path. It takes the same arguments as the circle() function; the only difference is that it accepts two radii values, rx and ry, for the shape radius instead of one. rx represents the X axis and ry the Y axis.
CSS:
/*Ellipse with location*/
.element { clip-path: ellipse(200px 100px at 0 50%); }
/*Ellipse without location is centered*/
.element { clip-path: ellipse(200px 100px); }
/*No value makes an ellipse that is as wide an tall as the element*/
.element { clip-path: ellipse(); }This CSS function defines a rectangle shape inside the element. It can take one, two, three, or four offset values. The syntax is the same as the syntax of the margin property.
It supports a length and a percentage value.
Additionally, the inset() function also supports a border-radius value, which is optional. This value must be preceded by the term round before any length or percentages are declared.
CSS:
/*Inset clip path where all four offset sides have the same distance*/
.element { clip-path: inset(20px); }
/*Inset clip path with border-radius declared*/
.element { clip-path: inset(5% 20px 10% 40px round 20px); }This CSS function is used to declare more various types of shapes, usually irregular ones that are different from a square, a circle or an ellipse.
Coordinate pairs are used to declare the points of the polygon; each pair specifies the position of a point. The first argument represents the X-position and the second argument, the Y-position coordinates. The first and last coordinate points are closed automatically by the browser. The coordinate values are comma-separated and support a length or a percentage value.
Now, creating polygons by hand is not only a major undertaking but it could be very time consuming. The best solution is to use a tool for the creation process:
- Bennet Feely's Clippy (http://bennettfeely.com/clippy/)
- Clip Path Generator (http://cssplant.com/clip-path-generator)
CSS:
/*This polygon has 3 pairs of coordinates so it creates a triangle-shaped clipping path*/
.element { clip-path: polygon(0 0, 0 100%, 100% 0); }
/*Custom polygon (a star) from Bennett Feely's, Clippy tool*/
.element { clip-path: polygon(50% 0%, 63% 38%, 100% 38%, 69% 59%, 82% 100%, 50% 75%, 18% 100%, 31% 59%, 0% 38%, 37% 38%); }