A Polymer 2.0 element for masking the images with basic (and some extraordinary) geometric shap
Install the component using Bower:
$ bower install img-mask --save
Or download as ZIP.
-
Import Web Components' polyfill:
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.10/webcomponents.min.js"></script>
-
Import Custom Element:
<link rel="import" href="img-mask/img-mask.html">
-
Start using it!
<img-mask></img-mask>
Attribute | Options | Default | Description |
---|---|---|---|
shape |
circle , triangle , square , hexagon , octagon , star , rhombus , parallelogram , plus , squircle , ring |
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.)
<img-mask shape="circle" size="320" src="img/image.jpg" href="#" title="A short description of an image" desc="A long description of an image"></img-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.
MIT License This component is inspired from https://github.com/hejty/image-mask