@chrisburnell/paper-stamp
v0.0.5
Published
A Web Component to display an img as a paper stamp.
Downloads
22
Maintainers
Readme
paper-stamp
A Web Component to display an img as a paper stamp
Examples
General usage example
<script type="module" src="paper-stamp.js"></script>
<paper-stamp>
<img src="example.jpg" alt="">
</paper-stamp>
Custom stamp color
<script type="module" src="paper-stamp.js"></script>
<paper-stamp color="cyan">
<img src="example.jpg" alt="">
</paper-stamp>
Custom stamp padding
<script type="module" src="paper-stamp.js"></script>
<paper-stamp padding="50px">
<img src="example.jpg" alt="">
</paper-stamp>
Custom stamp perforation size
<script type="module" src="paper-stamp.js"></script>
<paper-stamp perforation="15px">
<img src="example.jpg" alt="">
</paper-stamp>
Custom stamp perforation spacing multiplier
<script type="module" src="paper-stamp.js"></script>
<paper-stamp spacing="6">
<img src="example.jpg" alt="">
</paper-stamp>
Features
This Web Component presents an img to make it look like a paper stamp.
Installation
You have a few options (choose one of these):
- Install via npm:
npm install @chrisburnell/paper-stamp
- Download the source manually from GitHub into your project.
- Skip this step and use the script directly via a 3rd party CDN (not recommended for production use)
Usage
Make sure you include the <script>
in your project (choose one of these):
<!-- Host yourself -->
<script type="module" src="paper-stamp.js"></script>
<!-- 3rd party CDN, not recommended for production use -->
<script
type="module"
src="https://www.unpkg.com/@chrisburnell/paper-stamp/paper-stamp.js"
></script>
<!-- 3rd party CDN, not recommended for production use -->
<script
type="module"
src="https://esm.sh/@chrisburnell/paper-stamp"
></script>
Credit
With thanks to the following people:
- David Darnes for creating this Web Component repo template