Nonlinear Performance Magnification
Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

cosha

0.3.12 • Public • Published

cosha

latest version on npm npm downloads a month required node version dependency status package license

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 small 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(). The default values are:

cosha({
  className: 'cosha',
  blur: '5px',
  brightness: 1,
  saturation: 1,
  x: 0,
  y: 0
});

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

Install

npm i cosha

DownloadsWeekly Downloads

78

Version

0.3.12

License

MIT

Unpacked Size

9.41 kB

Total Files

8

Last publish

Collaborators

  • avatar