https://github.com/cmiscm/stickerjs

https://github.com/cmiscm/stickerjs

Last synced: 8 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/cmiscm/stickerjs
• Owner: cmiscm
• License: mit
• Created: 2014-02-04T17:44:06.000Z (almost 12 years ago)
• Default Branch: master
• Last Pushed: 2015-11-01T09:13:03.000Z (about 10 years ago)
• Last Synced: 2024-11-06T17:42:29.554Z (about 1 year ago)
• Size: 174 KB
• Stars: 727
• Watchers: 31
• Forks: 128
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-frontend - Sticker.js - create a Sticker Effect
• awesome-frontend - Sticker.js - create a Sticker Effect
• awesome-front-end - Sticker.js - create a Sticker Effect

README

          
Sticker.js

============

[![alt text](http://cmiscm.github.io/stickerjs/screenshot/sticker-js.jpg)](https://github.com/cmiscm/stickerjs)

A Javascript library that allows you to create a Sticker Effect.

 * No dependencies

 * Works in most of major browsers that support CSS 3 (IE10+)

 * MIT License

 

### Example

[http://stickerjs.cmiscm.com/](http://stickerjs.cmiscm.com/)

### Usage

Download the js file and include it in your html, and create sticker elements.

```html

	

	


	


	

    

```


Add background image or background color. you can also change the shadow opacity.

```css

	.sticker {

		width: 180px;

		height: 180px;

	}

	// add image

	.example-1 .sticker-img {

		background-image: url(heroes-2.png);

	}

	// add color

	.example-2 .sticker-img {

		background-color: #ff4a85;

	}

	// change shadow opacity

	.example-2 .sticker-shadow {

		opacity: 0.6;

	}

```

Call the init() method with target elements (.className or #ID).

```js

    Sticker.init('.sticker');

```

### License

Licensed under the MIT license.

 - http://www.opensource.org/licenses/mit-license.php