aikusuma / cosha

Colorful shadows for your images. 🎨

cosha

Colorful shadows for your images. 🎨

cosha lets you add colorful shadows to your images. Try it out and look for yourself—the bundle is less than 1kb heavy and it really couldn't be easier to set up!

How

yarn add cosha

<!-- on an img tag -->
<img src="palm-tree.jpg" alt="nice vibes" class="colorful-shadow"/>

<!-- on a picture tag -->
<picture class="colorful-shadow">
  <source srcset="palm-tree-1200.jpg 1200w, palm-tree-800.jpg 800w, palm-tree-400.jpg 400w" type="image/jpeg">
  <source srcset="palm-tree-1200.webp 1200w, palm-tree-800.webp 800w, palm-tree-400.webp 400w" type="image/webp">
  <img src="palm-tree-400.jpg" alt="nice vibes"/>
</picture>

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.

<script src="https://unpkg.com/cosha"></script>
<script>
  cosha({ className: 'colorful-shadow' });
</script>

Config

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

className

Type: string
Default: 'cosha'

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

blur

Type: number or string
Default: '5px'

The amount of blur to apply to the image. See the CSS blur function docs on MDN for more details.

brightness

Type: number or string
Default: 1

The amount of brightness to apply to the image. See the CSS brightness function docs on MDN for more details.

saturation

Type: number or string
Default: 1

The amount of saturation to apply to the image. See the CSS saturation function docs on MDN for more details.

x

Type: number or string
Default: 0

The amount of horizontal translation to apply to the image. See the CSS translate function docs on MDN for more details.

y

Type: number or string
Default: 0

The amount of vertical translation to apply to the image. See the CSS translate function docs on MDN for more details.

Gotcha

It runs in every browser except Internet Explorer. This is because of missing support for CSS filter properties. In case cosha detects it's running in a browser that doesn't have NodeList.prototype.forEach available, which at this point is only IE <= 11, it simply doesn't do anything.

License

MIT