Notes CSS - Mask

CSS Mask vs. Clip-Path

Both of these things are used to hide some parts of elements and show other parts. But there are differences between the two.

• Masks are Images
• Clips are Paths

Imagine a square image that is a left-to-right, black-to-white gradient. That can be a mask. The element it is applied to will be transparent where there is black in our gradient mask image, and opaque where there is white. So the final result will be an element that fades in from left to right.

Clips are always vector paths. Outside the path is transparent, inside the path is opaque.

CSS For Mask

mask	Shorthand property. Covers mask-clip, mask-composite, mask-image, mask-mode, mask-origin, mask-position, mask-repeat, mask-size
mask-border	The mask-border CSS shorthand property lets you create a mask along the edge of an element's border. Covers mask-border-mode, mask-border-outset, mask-border-repeat, mask-border-slice, mask-border-source, mask-border-width
mask-border-mode	The mask-border-mode CSS property specifies the blending mode used in a mask border. Values: luminance - The luminance values of the mask border image are used as the mask values. alpha - The alpha values of the mask border image are used as the mask values.
mask-border-outset	The mask-border-outset CSS property specifies the distance by which an element's mask border is set out from its border box. The mask-border-outset property may be specified as one, two, three, or four values. Each value is a <length> or <number>. Negative values are invalid. one value, it applies the same outset to all four sides. two values, the first outset applies to the top and bottom, the second to the left and right. three values, the first outset applies to the top, the second to the left and right, the third to the bottom. four values, the outsets apply to the top, right, bottom, and left in that order (clockwise).
mask-border-repeat	The mask-border-repeat CSS property sets how the edge regions of a source image are adjusted to fit the dimensions of an element's mask border. one value, it applies the same behavior on all four sides. two values, the first applies to the top and bottom, the second to the left and right. Values: stretch - The source image's edge regions are stretched to fill the gap between each border. repeat - The source image's edge regions are tiled (repeated) to fill the gap between each border. Tiles may be clipped to achieve the proper fit. round - The source image's edge regions are tiled (repeated) to fill the gap between each border. Tiles may be stretched to achieve the proper fit. space - The source image's edge regions are tiled (repeated) to fill the gap between each border. Extra space will be distributed in between tiles to achieve the proper fit.
mask-border-slice	The mask-border-slice CSS property divides the image set by mask-border-source into regions. These regions are used to form the components of an element's mask border. one, it creates all four slices at the same distance from their respective sides. two, the first value creates slices measured from the top and bottom, the second creates slices measured from the left and right. three, the first value creates a slice measured from the top, the second creates slices measured from the left and right, the third creates a slice measured from the bottom. four, they create slices measured from the top, right, bottom, and left in that order (clockwise). The optional fill value, if used, can be placed anywhere in the declaration. Values <number> - Represents an edge offset in pixels for raster images and coordinates for vector images. For vector images, the number is relative to the element's size, not the size of the source image, so percentages are generally preferable in these cases. <percentage> - Represents an edge offset as a percentage of the source image's size: the width of the image for horizontal offsets, the height for vertical offsets. fill - Preserves the middle image region. Its width and height are sized to match the top and left image regions, respectively. Description The slicing process creates nine regions in total: four corners, four edges, and a middle region. Four slice lines, set a given distance from their respective sides, control the size of the regions. The above diagram illustrates the location of each region. Zones 1-4 are corner regions. Each one is used a single time to form the corners of the final border image. Zones 5-8 are edge regions. These are repeated, scaled, or otherwise modified in the final border image to match the dimensions of the element. Zone 9 is the middle region. It is discarded by default, but is used like a background image if the keyword fill is set. The mask-border-repeat, mask-border-width, and mask-border-outset properties determine how these regions are used to form the final mask border.
mask-border-source	The mask-border-source CSS property sets the source image used to create an element's mask border. The mask-border-slice property is used to divide the source image into regions, which are then dynamically applied to the final mask border.
mask-border-width	The mask-border-width CSS property sets the width of an element's mask border. one value, it applies the same width to all four sides. two values, the first width applies to the top and bottom, the second to the left and right. three values, the first width applies to the top, the second to the left and right, the third to the bottom. four values, the widths apply to the top, right, bottom, and left in that order (clockwise).
mask-clip	The mask-clip CSS property determines the area which is affected by a mask. The painted content of an element must be restricted to this area. Values content-box - The painted content is clipped to the content box. padding-box - The painted content is clipped to the padding box. border-box - The painted content is clipped to the border box. fill-box - The painted content is clipped to the object bounding box. stroke-box - The painted content is clipped to the stroke bounding box. view-box - Uses the nearest SVG viewport as reference box. If a viewBox attribute is specified for the element creating the SVG viewport, the reference box is positioned at the origin of the coordinate system established by the viewBox attribute and the dimension of the reference box is set to the width and height values of the viewBox attribute. no-clip - The painted content is not clipped.
mask-composite	The mask-composite CSS property represents a compositing operation used on the current mask layer with the mask layers below it. One or more of the keyword values listed below, separated by commas. Values For the composition the current mask layer is referred to as source, while all layers below it are referred to as destination. add - The source is placed over the destination. subtract - The source is placed, where it falls outside of the destination. intersect - The parts of source that overlap the destination, replace the destination. exclude - The non-overlapping regions of source and destination are combined.
mask-image	The mask-image CSS property sets the image that is used as mask layer for an element. By default this means the alpha channel of the mask image will be multiplied with the alpha channel of the element. This can be controlled with the mask-mode property. Values none - This keyword is interpreted as an opaque white image layer. <mask-source> - A url() reference to a <mask> or to a CSS image. <image> - An image value used as mask image layer.
mask-mode	The mask-mode CSS property sets whether the mask reference defined by mask-image is treated as a luminance or alpha mask. The mask-mode property is specified as one or more of the keyword values listed below, separated by commas. Values alpha - This keyword indicates that the transparency (alpha channel) values of the mask layer image should be used as the mask values. luminance - This keyword indicates that the luminance values of the mask layer image should be used as the mask values. match-source - If the mask-image property is of type <mask-source>, the luminance values of the mask layer image should be used as the mask values. If it is of type <image>, the alpha values of the mask layer image should be used as the mask values.
mask-origin	The mask-origin CSS property sets the origin of a mask. For elements rendered as a single box, this property specifies the mask positioning area. In other words, this property specifies the origin position of an image specified by the mask-image CSS property. For elements rendered as multiple boxes, such as inline boxes on several lines or boxes on several pages, it specifies which boxes box-decoration-break operates upon to determine the mask positioning area. One or more of the keyword values listed below, separated by commas. Values content-box - The position is relative to the content box. padding-box - The position is relative to the padding box. For single boxes 0 0 is the upper left corner of the padding edge, 100% 100% is the lower right corner. border-box - The position is relative to the border box. fill-box - The position is relative to the object bounding box. stroke-box - The position is relative to the stroke bounding box. view-box - Uses the nearest SVG viewport as reference box. If a viewBox attribute is specified for the element creating the SVG viewport, the reference box is positioned at the origin of the coordinate system established by the viewBox attribute and the dimension of the reference box is set to the width and height values of the viewBox attribute.
mask-position	The mask-position CSS property sets the initial position, relative to the mask position layer set by mask-origin, for each defined mask image. Values: top, bottom, left, right, center, percentage, pixels, em, rem
mask-repeat	The mask-repeat CSS property sets how mask images are repeated. A mask image can be repeated along the horizontal axis, the vertical axis, both axes, or not repeated at all. By default, the repeated images are clipped to the size of the element, but they can be scaled to fit (using round) or evenly distributed from end to end (using space). Values: repeat-x, repeat-y, repeat, space, round, no-repeat
mask-size	The mask-size CSS property specifies the sizes of the mask images. The size of the image can be fully or partially constrained in order to preserve its intrinsic ratio. Values: cover, contain, percentage, pixel, em, rem, auto
mask-type	The mask-type CSS property sets whether an SVG <mask> element is used as a luminance or an alpha mask. It applies to the <mask> element itself. This property may be overridden by the mask-mode property, which has the same effect but applies to the element where the mask is used. Alpha masks will generally be faster to render. Values: luminance - Is a keyword indicating that the associated mask image is a luminance mask, i.e., that its relative luminance values must be used when applying it. alpha - Is a keyword indicating that the associated mask image is an alpha mask, i.e., that its alpha channel values must be used when applying it.

mask-size

The mask-size CSS property specifies the sizes of the mask images. The size of the image can be fully or partially constrained in order to preserve its intrinsic ratio.

If the value of this property is not set in a mask shorthand property that is applied to the element after the mask-size CSS property, the value of this property is then reset to its initial value by the shorthand property.

Examples Of Masks

The following use SVG Files that are gradients between black and transparent. Where the SVG file is black, the image shows. Where it is transparent the background color shows.

The following is created using a PNG file with an alpha channel

Custom Buttons

The ::before & ::after Pseudo Elements

The ::before and ::after pseudo-elements in CSS allows you to insert content onto a page without it needing to be in the HTML. While the end result is not actually in the DOM, it appears on the page as if it is, and would essentially be like this:

The only reasons to use one over the other are:

• You want the generated content to come before the element content, positionally.
• The ::after content is also "after" in source-order, so it will position on top of ::before if stacked on top of each other naturally.

that the content is still inside the element they are applied to. The naming sort of feels like they might come, ya know, before or after the element, but it's really before or after the other content inside.

The value for content can be:

• A string: content: "a string"; - special characters need to be specially encoded as a unicode entity.
• An image: content: url(/path/to/image.jpg); - The image is inserted at it's exact dimensions and cannot be resized. Since things like gradients are actually images, a pseudo element can be a gradient.
• Nothing: content: ""; - Useful for clearfixes and inserting images as a background-image (set width and height, and can even resize with background-size).
• A counter: content: counter(li); - Really useful for styling lists (but we also have ::marker for that).
• A line break: content: "Killing \A Me \A Softly"; - Great for when you really need one.

CSS Clip-Path