https://github.com/robinloeffel/cosha

Colorful shadows for your images. 🎨
https://github.com/robinloeffel/cosha

browser colorful-shadows css css-filters dom images shadows

Last synced: about 1 month ago
JSON representation

Colorful shadows for your images. 🎨

• Host: GitHub
• URL: https://github.com/robinloeffel/cosha
• Owner: robinloeffel
• License: mit
• Created: 2019-09-05T20:04:13.000Z (about 5 years ago)
• Default Branch: main
• Last Pushed: 2023-12-10T12:33:04.000Z (9 months ago)
• Last Synced: 2024-05-01T15:07:54.395Z (4 months ago)
• Topics: browser, colorful-shadows, css, css-filters, dom, images, shadows
• Language: TypeScript
• Homepage: https://robinloeffel.github.io/cosha
• Size: 1.19 MB
• Stars: 987
• Watchers: 11
• Forks: 19
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • Changelog: changelog.md
  • License: license.txt

Awesome Lists containing this project

• my-awesome-list - cosha

README

        


  



# cosha

[![version on npm](https://badgen.net/npm/v/cosha)](https://www.npmjs.com/package/cosha)

[![weekly downloads on npm](https://badgen.net/npm/dw/cosha)](https://www.npmjs.com/package/cosha)

[![types](https://badgen.net/npm/types/cosha)](https://www.npmjs.com/package/cosha)

[![minified size](https://badgen.net/bundlephobia/minzip/cosha)](https://bundlephobia.com/package/cosha)

[![license](https://badgen.net/npm/license/cosha)](https://github.com/robinloeffel/cosha/blob/main/license.txt)

> Colorful shadows for your images. 🎨

[`cosha`](https://npm.robinloeffel.ch/cosha) lets you add **co**lorful **sha**dows to your images. Try it out and look for yourself—it really couldn't be easier to set up!

## How

```bash

npm i cosha

```

```html



  

  

  

```

```js

import cosha from "cosha";

cosha({

  className: "colorful-shadow",

  blur: "10px",

  brightness: "125%",

  saturation: "110%",

  x: "2px",

  y: "6px"

});

```

Alternatively, if that module bundler stuff isn't for you, you can get it directly from [`https://unpkg.com/cosha`](https://unpkg.com/cosha).

```html

  import cosha from "https://unpkg.com/cosha";

  cosha();

```

## Config

Everything in the config is optional. You can also use it by just calling `cosha()`.

```js

cosha(options);

```

### `options.className`

Type: `string`


Default: `"cosha"`

The class the plugin looks for. This should be on the original `img` or `picture` node(s).

### `options.blur`

Type: `number | string`


Default: `"5px"`

The amount of blur to apply to the image. See the [CSS `blur` function docs](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/blur) on MDN for more details.

### `options.brightness`

Type: `number | string`


Default: `1`

The amount of brightness to apply to the image. See the [CSS `brightness` function docs](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/brightness) on MDN for more details.

### `options.saturation`

Type: `number | string`


Default: `1`

The amount of saturation to apply to the image. See the [CSS `saturation` function docs](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/saturation) on MDN for more details.

### `options.x`

Type: `number | string`


Default: `0`

The amount of horizontal translation to apply to the image. See the [CSS `translate` function docs](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate) on MDN for more details.

### `options.y`

Type: `number | string`


Default: `0`

The amount of vertical translation to apply to the image. See the [CSS `translate` function docs](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate) on MDN for more details.

## Gotcha

It runs in every browser except Internet Explorer. This is because of missing support for standard [CSS `filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter#Browser_compatibility) functions.

## License

MIT