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.
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!
Top comments (0)