# js-backgound-blend-mode

> A JavaScript based polyfill for browsers that don’t support CSS background-blend-mode property.

Latest version **0.0.1** (published 2017-11-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install js-backgound-blend-mode
pnpm add js-backgound-blend-mode
yarn add js-backgound-blend-mode
bun add js-backgound-blend-mode
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2017-11-18 |
| First published | 2017-11-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | juanbrujo |
| Keywords | javascript, blend-mode, css, polyfill |

## Links

- npm: https://www.npmjs.com/package/js-backgound-blend-mode
- Homepage: https://github.com/juanbrujo/js-background-blend-mode
- npm.io page: https://npm.io/package/js-backgound-blend-mode

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 0.0.1 (latest) — 2017-11-18

## README

# js-background-blend-mode

A JavaScript based _polyfill_ for browsers that don’t support CSS [`background-blend-mode`](http://html.adobe.com/webplatform/graphics/blendmodes/) property.

#### Browser Support: 

- CSS background-blend-mode: many browsers but IE11- and some mobile [Can I Use...](http://caniuse.com/#feat=css-backgroundblendmode).
- Canvas blend modes: any browser but IE11- [Can I Use...](http://caniuse.com/#feat=canvas-blending).

#### Demo: 
[Codepen](http://codepen.io/juanbrujo/full/DnghH/)

![js-background-blend-mode](https://i.imgur.com/KSPNis4.png)

## Usage

1. Add the `js-background-blend-mode.js` file to your HTML
2. Define an element using `data-blend` attribute and one of those values:

	**normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity**

3. Add an image to blend using the `data-blend-image` attribute.
4. Add a color to blend using `data-blend-color` attribute.
5. Add a little CSS and the fallback if the browser support CSS `background-blend-mode` (js-background-blend-mode.css file).

#### Example:

```html
<div class="blend" data-blend="overlay" data-blend-image="demo.jpg" data-blend-color="rgba(255, 0, 0, 0.5)"></div>
```

## TODO

- Polish code
- Check for better crossbrowser support
- Better performance (it is still slow to render)
- ~~Gruntify~~
- Get rid of CSS file
- ~~Bowerify~~
- NPM module

## Credit

- Forked from: [https://github.com/idevsoftware/](https://github.com/idevsoftware/js-background-blend-mode/)
- Adobe Blend Modes and Compositing: [http://html.adobe.com/webplatform/](http://html.adobe.com/webplatform/graphics/blendmodes/)

## License


Original License: [ABRSL](https://github.com/idevsoftware/js-background-blend-mode/blob/master/LICENSE.md).

Forked License: [MIT](https://github.com/juanbrujo/js-background-blend-mode/blob/master/LICENSE)

---
_Source: https://npm.io/package/js-backgound-blend-mode · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._