Colorful & Blurred Shadows For Images – Cosha

Category: Image , Javascript , Recommended | January 16, 2022
Author:robinloeffel
Views Total:28 views
Official Page:Go to website
Last Update:January 16, 2022
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 the image within the document.

cosha('.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('.has-shadow',{
  blur: '5px',
  brightness: '125%',
  saturation: '110%'
});

5. Set the shadow size. Default: 0.

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

Changelog:

v2.0.0 (01/16/2022)

  • drop ie, simplify api, clean up css

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