search

httpstersk / image-mask

A Polymer element for masking the images with basic (and some extraordinary) geometric shapes
29 stars 9 forks source link

readme

<image-mask>

A Polymer element for masking the images with basic (and some extraordinary) geometric shapes

alt tag

Demo

Check it live!

Install

  1. Install from npm registry:

    npm install polymer-image-mask

Usage

  1. Import Custom Element as a script with type module or ES module:

    <script src="https://github.com/httpstersk/image-mask/raw/master/image-mask.js" type="module"></script>
    import { ImageMask } from 'polymer-image-mask';

  2. 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="https://github.com/httpstersk/image-mask/raw/master/img/image.jpg" title="A short description of an image" desc="A long description of an image"></image-mask>

Contributing

  1. Fork it 🍴
  2. Create your feature branch: git checkout -b my-freaking-cool-feature
  3. Commit your changes: git commit -m 'Add some freaking cool feature'
  4. Push to the branch: git push origin my-freaking-cool-feature
  5. Submit a pull request ☝️

History

For detailed changelog, check Releases.

License

MIT License