How To Use Clipping And Masking Techniques With CSS

September 25, 2017

clipping-masking

Clipping and masking are two commonly used operation in computer graphics which are used to hide some parts of elements and show other parts.

Clipping defines the region of an element that is visible. Masking is a method of ‘hiding’ a portion of an object based on another object. Masks are images; clips are always vector paths. Outside the path is transparent, inside the path is opaque.

Following is a simple example of using clipping and masking technique with CSS.


The Old/Deprecated clip

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

The New clip-path

  • The new, recommend version of applying clipping to elements in CSS is clip-path.
css mask
  • The new way to do this is with inset():
css clipping
  • clip-path though (in some browsers), is circles, ellipses, and polygons.
masking in css

Result

Web design

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:
css
website design usa

Animating/Transitioning clip-path

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

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

Example:

Html Code:

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)));
}

masking in css

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

css mask

Mask Types

skynet technologies

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.
clipping mask

  • 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:

css clipping
css mask
css mask
css mask
css mask
css mask
css mask
css mask

Related Posts Best 50 Free Fonts For 2018
Difference between Bootstrap V3 and V4? Is It Worth Upgrading?
How To Build A Multilayer Parallax With Pure CSS?
How to add image alter text in WordPress website?
How to add meta title and description in WordPress website?
Last Update: September 25th, 2017