Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 3 days 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 (over 5 years ago)
- Default Branch: main
- Last Pushed: 2023-12-10T12:33:04.000Z (about 1 year ago)
- Last Synced: 2025-02-04T22:35:57.230Z (7 days ago)
- Topics: browser, colorful-shadows, css, css-filters, dom, images, shadows
- Language: TypeScript
- Homepage: https://robinloeffel.github.io/cosha
- Size: 1.19 MB
- Stars: 983
- 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
- stars - cosha
- stars - cosha
README
# cosha
[](https://www.npmjs.com/package/cosha)
[](https://www.npmjs.com/package/cosha)
[](https://www.npmjs.com/package/cosha)
[](https://bundlephobia.com/package/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