How To Use Clipping And Masking Techniques With CSS

The Old/Deprecated clip

• The first presence of clipping in CSS (other than overflow: hidden; trickery) was the clip property.

The New clip-path

• The new, recommend version of applying clipping to elements in CSS is clip-path.

• The new way to do this is with inset():

• clip-path though (in some browsers), is circles, ellipses, and polygons.

Result

Using clip-path with an SVG-defined

• You don’t have to define the clip-path value right in CSS, it can reference a element defined in SVG. Here’s what that looks like:

Animating/Transitioning clip-path

• When you declare a basic shape as a clip-path, you can animate it!

• There was a WebKit-only version of masking where you could link up a raster image or define a gradient to be a mask.

Example:

Html Code:

<img class=”” src=”Image-path” alt=”” title=””>

CSS Code:

img {
width: 150px;
mask-image: -webkit-gradient(linear, left top, right bottom,color-stop(0.00, rgba(0,0,0,1)),color-stop(0.35, rgba(0,0,0,1)), color-stop(0.50, rgba(0,0,0,0)), color-stop(0.65, rgba(0,0,0,0)),
color-stop(1.00, rgba(0,0,0,0)));
}

link up an entire SVG file as the mask, like:

Mask Types

Border Types

• The corners are used in the corners, the edges (can be) repeated along the edges, and the middle (can) stretch in the middle.

• Different properties and even values have different support levels all over the place.
• As far as prefixing goes: use the non-prefixed and -webkit- prefix on pretty much everything.

Some of Example of browser support: