Colorful & Blurred Shadows For Images – Cosha

Category: Image , Javascript , Recommended | May 10, 2021
Author: robinloeffel
Views Total: 47 views
Official Page: Go to website
Last Update: May 10, 2021
License: MIT

Preview:

Colorful & Blurred Shadows For Images – Cosha

Description:

Cosha is a JavaScript library that applies colorful shadows to the image by cloning & blurring the image and placing it behind the original image.

How to use it:

1. Install and import the Cosha as an ES module.

# Yarn
$ yarn add cosha

# NPM
$ npm i cosha --save
import cosha from 'cosha';

2. Or load the compiled JavaScript in the document.

<script src="cosha.iife.js"></script>

3. Apply the Cosha to image within the document.

cosha({
  className: 'has-shadow'
});
<img src="1.jpg" class="has-shadow" alt="" />
<picture class="has-shadow">
  <source srcset="1.jpg 1200w, 1-800.jpg 800w, 1-400.jpg 400w" type="image/jpeg">
  <source srcset="1.webp 1200w, 1-800.webp 800w, 1-400.webp 400w" type="image/webp">
  <img src="1-400.jpg" alt="" />
</picture>

4. Customize the blur, brightness, and saturate filter functions.

cosha({
  className: 'has-shadow',
  blur: '5px',
  brightness: '125%',
  saturation: '110%'
});

5. Set the shadow size. Default: 0.

cosha({
  className: 'has-shadow',
  x: '5px',
  y: '5px'
});

Changelog:

v1.1.1 (05/10/2021)

  • run esm and cjs bundles through buble, too (fix breaking on ie)
  • check for -ms-filter instead of NodeList.prototype.forEach to target ie

You Might Be Interested In:


Leave a Reply