A Polymer element for masking the images with basic (and some extraordinary) geometric shap
Install the component using Bower:
$ bower install image-mask --save
Or download as ZIP.
-
Import Web Components' polyfill:
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.7/webcomponents.min.js"></script>
-
Import Custom Element:
<link rel="import" href="image-mask/image-mask.html">
-
Start using it!
<image-mask></image-mask>
Attribute | Options | Default | Description |
---|---|---|---|
shape |
circle , triangle , square , hexagon , octagon , star , rhombus , parallelogram , plus |
circle |
The shape attribute sets a masking shape |
size |
int | 320 |
The size attribute sets a size of an element |
`src` | *string* | `http://placehold.it/320` | The `src` attribute defines a path to an image that will be masked
href
| string | -
| The href
attribute sets the target URL
title
| string | -
| The title
attribute sets a short description of an image. (It's not rendered visually by default.)
desc
| string | -
| The desc
attribute sets a long description of an image. (It's not rendered visually by default.)
<image-mask shape="circle" size="320" src="img/image.jpg" href="#" title="A short description of an image" desc="A long description of an image"></image-mask>
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -m 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request ;)
For detailed changelog, check Releases.