DEV Community

Cover image for MASK.CSS - Mask images and DIVs with ease
Simon Köhler
Simon Köhler

Posted on

MASK.CSS - Mask images and DIVs with ease

The other day I needed some vector shapes to mask images for a theme project. First I played around intensively with the CSS property "mask-image" and then I decided to release a small library.

DEMOCONTRIBUTE

What does MASK.CSS do?

MASK.CSS works in any website, and is not bound to any framework. Although it also works great with Bootstrap. You just need to include the "mask.css" file, and make sure all vector graphics are stored in the right place.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/koehlersimon/maskcss@master/mask.css">

Once you have MASK.CSS included, you can mask objects like images and containers by adding a few simple classes.

<img class="mask mask-circle mask-repeat mask-size-10" src="img/canyon.jpg" alt="masked image">

Demo on Codepen

Get involved!

If you have original ideas for new vector shapes, join the GitHub project. I welcome any contributor who brings new ideas and improvements to MASK.CSS!

Discussion (0)