CSS Masks | CSS: Presentation Layer
Standards Based Development
A clipping mask is an object whose shape masks other artwork so that only areas that lie within the shape are visible; in effect, clipping the artwork to the shape of the mask. The clipping mask and the objects thare masked are called a clipping set. Clipping sets can be made from a selection of two or more objects or from all objects in a group or layer.
Object-level clipping sets are combined as a group in the Layers panel. If you create layer-level clipping sets, the object on top of the layer clips all of the objects below it. All operations that are performed on an object-level clipping set, such as transformations and alignment, are based on the clipping mask's boundary, not the unmasked boundary.Note: once an object-level clipping mask has been created, the clipped content can only be selected via Layers panel, Direct Selection tool, or by isolating the clipping set.
">Adobe informative video on using Pathfinder effects and clipping masks and how to import clipping masks into Flash.Guidelines for Creating Clipping Masks in Illustrator
- the objects that are masked are moved into the clipping mask's group in the Layers panel if they do not already reside there.
- Only vector objects can be clipping masks, however, any artwork can be masked
- If a layer/group is used to create clipping mask, the first object in the layer or group masks everything that is a subset of the layer/group
- A clipping mask changes to an object with no fill or stroke, regardless of its previous attributes.
- Note: in order to overcome the previous item, and create a semitransparent mask, use the Transparency panel to create an opacity mask
-webkit-mask (background)
-webkit-mask-attachment (background-attachment)
-webkit-mask-clip (background-clip)
-webkit-mask-origin (background-origin)
-webkit-mask-image (background-image)
-webkit-mask-repeat (background-repeat)
-webkit-mask-composite (background-composite)
-webkit-mask-box-image (border-image)
css masks result in a stacking context being created, similar to how opacity/transforms work. The mask overlays the child and all of its descendants and (at the very least) knock out everything outside the border box of the object.
Masks are used to display only particular areas of an image (masking off), without destroying the areas not being used.
css Masks are treated extremely similar to background.