Colorful shadows for your images. 🎨

Overview

cosha

latest version on npm npm downloads a month package license

Colorful shadows for your images. 🎨

cosha lets you add colorful shadows to your images. Try it out and look for yourself—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('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('colorful-shadow');
</script>

Config

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

cosha(className, { 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 or string
Default: '5px'

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

options.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.

options.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.

options.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.

options.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 standard CSS filter functions.

License

MIT

You might also like...

Simple jQuery plugin that will allow users to zoom in your images, perfect for product images and galleries.

Simple jQuery plugin that will allow users to zoom in your images, perfect for product images and galleries.

Image Zoom (jQuery) Plugin Simple jQuery plugin that will allow users to zoom in your images, perfect for product images and galleries that is less th

Aug 3, 2022

Compare James Webb Space Telescope images to older images.

Compare James Webb Space Telescope images to older images.

How much more powerful is the James Webb Space Telescope when compared to Hubble? Find out! More info Want to help out? CONTRIBUTING.md Blog post with

Jan 3, 2023

MidJourney is an AI text-to-image service that generates images based on textual prompts. It is often used to create artistic or imaginative images, and is available on Discord and through a web interface here.

MidJourney is an AI text-to-image service that generates images based on textual prompts. It is often used to create artistic or imaginative images, and is available on Discord and through a web interface here.

Midjourney MidJourney is an AI text-to-image service that generates images based on textual prompts. It is often used to create artistic or imaginativ

May 1, 2023

📷 Detects your face and adds filters from your webcam. You can capture and download images.

📷 Detects your face and adds filters from your webcam. You can capture and download images.

Snapchat Filters on WebCam 📷 Detects your face and adds filters from your webcam. You can capture and download images. 👉 Visit site 📌 Screenshots ?

Apr 27, 2022

Add focal point alignment of images to your Alpine 3.x components with a custom directive.

Alpine Focal Add focal point alignment of images to your Alpine 3.x components with a custom directive. This package only supports Alpine v3.x. About

Oct 12, 2021

Make use of your favicon with badges, images or videos

favico.js More info here. Author Miroslav Magda Version 0.3.9 Contributors: Serge Barysiuk, pissflaps, Yaroslav Yakovlev, LoicMahieu, Renan Gonçalves,

Dec 21, 2022

Annotation tools for the web. Select text, images, or (nearly) anything else, and add your notes.

Annotator Annotator is a JavaScript library for building annotation applications in browsers. It provides a set of interoperable tools for annotating

Dec 23, 2022

Create beautiful images and gifs of your source code 🚀🤖➕

Create beautiful images and gifs of your source code 🚀🤖➕

Darwin Awesome gifs and images of your code View Demo · Report Bug · Request Feature About The Project darwin.mp4 My motivation for building this was

Sep 7, 2022

Minificator allows you to quickly minify your files (Images, HTML, CSS, Javascript)

Minificator allows you to quickly minify your files (Images, HTML, CSS, Javascript)

ᗰIᑎIᖴIᑕᗩTOᖇ ~ Demo ~ 📌 Description Minification is the process of removing unnecessary elements and rewriting code to reduce file size. These are usu

Nov 14, 2022
Comments
  • Hide background image for screen readers

    Hide background image for screen readers

    Because this library is duplicating the node, a screen reader would pass over both the images and repeat the callout. Therefore you need to add the attribute 'aria-hidden' on the background image.

    clone.setAttribute('aria-hidden', 'true');

    If you open up PR's I can create one, if not I have implemented it on vue-cosha if you want to copy it over!

    opened by kn0wn 2
  • How does this work?

    How does this work?

    I am impressed with how tiny the code is - and I see that a clone of the image is made and then some CSS is applied to it - which I do not understand.

    Would it be possible to add a "How it works?" section to the readme? That would be very educational... Thanks for this!

    opened by paramaggarwal 1
  • Potential XSS issue in the stylesheets

    Potential XSS issue in the stylesheets

    First of all I must thank you for learning me an awesome trick that I didn't know about =)

    I noticed that you are inserting the style tag as raw HTML with potentially unescaped parameters. Granted it is not likely this will be exploitable since the web page will need to allow users to set the class name, or any of the drop shadow parameters for this to be exploitable, but it is also relatively simple to fix it.

    The fix is replacing

    document.head.insertAdjacentHTML('beforeend', `<style>
    styles here...
    </style>`);
    

    with

    const styles = document.createElement('style');
    styles.textContent = `
    styles here...
    `;
    document.head.appendChild(styles);
    

    I have attached a JSfiddle here which shows how you can exploit it... Just hit the submit button and you will get an alert.

    enhancement 
    opened by Andreas-Hjortland 1
Releases(v2.0.3)
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
Generate smooth, consistent and always-sexy box-shadows, no matter the size, ideal for design token generation.

smooth-shadow Generate smooth, consistent and always-sexy box-shadows, no matter the size, ideal for design token generation. Demo As Tobias already p

Thomas Strobl 4 Oct 15, 2022
Playful and Colorful One-Page portfolio featuring Parallax effects and animations. Especially designers and/or photographers will love this theme! Built with MDX and Theme UI.

Gatsby Starter Portfolio: Cara Playful and Colorful One-Page portfolio featuring Parallax effects and animations. Using the Gatsby Theme @lekoarts/gat

prashanth s 1 Dec 24, 2021
🎨ansi escape code generator to help make colorful command line tools

ansicodes ?? ansi escape code generator to help make colorful command line tools i got tired of looking up ansi code tables when writing command line

Gabe Banks 53 Dec 17, 2022
Generate colorful and temporarily identifiable SVGs with unique urls.

reptiles.dev Generate colorful and temporarily identifiable SVGs with unique urls.

Tim Mikeladze 7 Dec 6, 2022
JQuery avatar plugin to create colorful text avatar and image avatar.

Gravatar Live Demo Pre Requirement jQuery.js initialization Its very easy to initialize the plug-in Step 1: In HTML <div data-avatar="text" class="ava

Sachin Jain 2 Oct 28, 2022
Easiest 1-click way to install and use Stable Diffusion on your own computer. Provides a browser UI for generating images from text prompts and images. Just enter your text prompt, and see the generated image.

Stable Diffusion UI Easiest way to install and use Stable Diffusion on your own computer. No dependencies or technical knowledge required. 1-click ins

null 3.5k Dec 30, 2022