image-mask
image-mask copied to clipboard
httpstersk
A Polymer element for masking the images with basic (and some extraordinary) geometric shapes
<image-mask>
A Polymer element for masking the images with basic (and some extraordinary) geometric shapes
Demo
Install
-
Install from npm registry:
npm install polymer-image-mask
Usage
-
Import Custom Element as a script with type
moduleorESmodule:<script src="image-mask.js" type="module"></script>import { ImageMask } from 'polymer-image-mask'; -
Start using it!
<image-mask></image-mask>
Options
| Attribute | Description | Options | Default |
|---|---|---|---|
shape |
The shape attribute sets a masking shape |
circle, triangle, square, hexagon, octagon, star, rhombus, parallelogram, plus, squircle, ring |
circle |
size |
The size attribute sets a size of an element |
int | 320 |
src |
The src attribute defines a path to an image that will be masked |
string | http://placehold.it/320 |
title |
The title attribute sets a short description of an image |
string | - |
desc |
The desc attribute sets a long description of an image |
string | - |
Example
<image-mask shape="circle" size="320" src="img/image.jpg" title="A short description of an image" desc="A long description of an image"></image-mask>
Contributing
- Fork it 🍴
- Create your feature branch:
git checkout -b my-freaking-cool-feature - Commit your changes:
git commit -m 'Add some freaking cool feature' - Push to the branch:
git push origin my-freaking-cool-feature - Submit a pull request ☝️
History
For detailed changelog, check Releases.
License
Metadata
29
Stars
9
Forks
Watchers
Owner
httpstersk
Metadata
A Polymer element for masking the images with basic (and some extraordinary) geometric shapes