chrisburnell/paper-stamp
chrisburnell/paper-stamp
1
0
Fork 0
mirror of https://github.com/chrisburnell/paper-stamp.git synced 2026-01-08 18:33:22 +00:00
Code Issues Projects Releases Packages Wiki Activity
A Web Component to display an img as a paper stamp. https://chrisburnell.com/paper-stamp/
8 commits 1 branch 5 tags 44 KiB
Find a file
Exact
Chris Burnell e37e4f5663
 amend: undefined CSS
2024-04-07 20:13:48 +08:00
.github fix: replace bug report/feature request templates 2024-04-06 22:24:46 +08:00
demo.html amend: undefined CSS 2024-04-07 20:13:48 +08:00
LICENSE initial commit 2024-03-24 02:44:11 +08:00
package.json fix: hook up attribute callbacks 2024-04-07 20:09:49 +08:00
paper-stamp.js fix: hook up attribute callbacks 2024-04-07 20:09:49 +08:00
README.md fix: hook up attribute callbacks 2024-04-07 20:09:49 +08:00

README.md

paper-stamp

A Web Component to display an img as a paper stamp

Demo | Further reading

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):

  1. Install via npm: npm install @chrisburnell/paper-stamp
  2. Download the source manually from GitHub into your project.
  3. 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: