The world of CSS just keeps getting better as new specs are introduced and eventually adopted by major browsers. One of those exciting specs is CSS Masking. While not fully supported across the major browser line up, it’s an interesting addition that’s generating a lot of attention. One absolutely outstanding example of what can be achieved with css masking is a project by Bryan James - Species in Pieces that showcases a collection of endangered species, made and animated using clip-path.
Defined in the CSS Masking Module Level 1 spec, CSS masking provides two ways to hide sections of full images or objects: masking and clipping. Masking allows the use of another element to create a luminance or an alpha mask. Clipping simply provides a mechanism to only show a certain section of an object. Think of it as taking scissors and cutting a part of a piece of paper into a shape you want.
In this post, I want to explore specifically the clip-path property and show a quick example of what can be achieved by it.