Page 106 - CSS

Chapter 12: Clipping and Masking

Syntax

• Clipping
• clip-path: <clip-source> | [ <basic-shape> || <clip-geometry-box> ] | none
• Masking
• mask-image: [ none | <mask-reference> ]#
• mask-mode: [ <mask-mode> ]#
• mask-repeat: [ <repeat-style ]#
• mask-position: [ <position> ]#
• mask-clip: [ <geometry-box> | no-clip ]#
• mask-origin: [ <geometry-box> ]#
• mask-size: [ <bg-size> ]#
• mask-composite: [ <compositing-operator> ]#
• mask: [ <mask-reference> <masking-mode>? || <position> [ / <bg-size> ]? || <repeat-style> ||
<geometry-box> || [ <geometry-box> | no-clip ] || <compositing-operator> ]#

Parameters

Parameter Details

A URL which can point to an inline SVG element (or) an SVG element in an
clip-source
external file that contains the clip path's definition.

Refers to one among inset(), circle(), ellipse() or polygon(). Using one of
basic-shape these functions the clipping path is defined. These shape functions work
exactly the same way as they do in Shapes for Floats

This can have one among content-box, padding-box, border-box, margin-box,
fill-box, stroke-box, view-box as values. When this is provided without any
clip-
value for <basic-shape>, the edges of the corresponding box is used as the
geometry-box
path for clipping. When used with a <basic-shape>, this acts as the
reference box for the shape.

mask-
This can be none or an image or a reference URL to a mask image source.
reference

This specifies how the mask should be repeated or tiled in the X and Y axes.
repeat-style
The supported values are repeat-x, repeat-y, repeat, space, round, no-repeat.

Can be alpha or luminance or auto and indicates whether the mask should be
treated as a alpha mask or a luminance mask. If no value is provided and the
mask-mode
mask-reference is a direct image then it would be considered as alpha mask
(or) if the mask-reference is a URL then it would be considered as luminance

https://riptutorial.com/ 84